jQuery: ¿Mejor práctica para poblar desplegable?

Question

El ejemplo que veo publicado todo el tiempo parece que no es óptimo, ya que implica la concatenación de cadenas, lo que parece no ser jQuery. Por lo general, se ve así:

$.getJSON("/Admin/GetFolderList/", function(result) { 
    for (var i = 0; i < result.length; i++) { 
     options += '<option value="' + result[i].ImageFolderID + '">' + result[i].Name + '</option>'; 
    } 
}); 

¿Hay una manera mejor?

Answer 1

Andreas Grech estaba bastante cerca ... en realidad es this (nótese la referencia al lugar de this el elemento de la circular):

var $dropdown = $("#dropdown"); 
$.each(result, function() { 
    $dropdown.append($("<option />").val(this.ImageFolderID).text(this.Name)); 
}); 

Answer 2

$.getJSON("/Admin/GetFolderList/", function(result) { 
    var options = $("#options"); 
    //don't forget error handling! 
    $.each(result, function(item) { 
     options.append($("<option />").val(item.ImageFolderID).text(item.Name)); 
    }); 
}); 

Lo que estoy haciendo anterior es la creación de un nuevo elemento <option> y agregarlo a la lista options (suponiendo options es el ID de un elemento desplegable.

PD Mi Javascript es un poco oxidado por lo que la sintaxis no puede ser perfecto

Answer 3

uso el plugin de jQuery selectboxes convierte su ejemplo en:.

$('#idofselect').ajaxAddOption('/Admin/GetFolderList/', {}, false); 

Answer 4

Claro: haga options una serie de cadenas y use .join('') en lugar de += cada vez que pase el ciclo. Ligero golpe rendimiento cuando se trabaja con un gran número de opciones ...

var options = []; 
$.getJSON("/Admin/GetFolderList/", function(result) { 
    for (var i = 0; i < result.length; i++) { 
     options.push('<option value="', 
      result[i].ImageFolderID, '">', 
      result[i].Name, '</option>'); 
    } 
    $("#theSelect").html(options.join('')); 
}); 

Sí. Todavía estoy trabajando con cuerdas todo el tiempo. Créalo o no, esa es la forma más rápida de construir un fragmento de DOM ... Ahora, si tiene pocas opciones, no importará: use la técnica Dreas demonstrates si le gusta el estilo. Pero tenga en cuenta que está invocando el analizador HTML interno del navegador i*2 veces, en lugar de una sola vez, y modificando el DOM cada vez a través del bucle ... con un número suficiente de opciones. terminará pagándolo, especialmente en navegadores más antiguos.

Nota: Como señala Justicia, esto se vendrá abajo si ImageFolderIDName y no son encoded properly ...

Answer 5

la forma más rápida es la siguiente:

$.getJSON("/Admin/GetFolderList/", function(result) { 
     var optionsValues = '<select>'; 
     $.each(result, function(item) { 
      optionsValues += '<option value="' + item.ImageFolderID + '">' + item.Name + '</option>'; 
     }); 
     optionsValues += '</select>'; 
     var options = $('#options'); 
     options.replaceWith(optionsValues); 
    }); 

De acuerdo con this link es la manera más rápida porque envuelve todo en un solo elemento al realizar cualquier tipo de inserción de DOM.

Answer 6

$.get(str, function(data){ 
      var sary=data.split('|'); 
      document.getElementById("select1").options.length = 0; 
      document.getElementById("select1").options[0] = new Option('Select a State'); 
      for(i=0;i<sary.length-1;i++){ 
       document.getElementById("select1").options[i+1] = new Option(sary[i]); 
       document.getElementById("select1").options[i+1].value = sary[i]; 
      } 
      }); 

Answer 7

O tal vez:

var options = $("#options"); 
$.each(data, function() { 
    options.append(new Option(this.text, this.value)); 
}); 

Answer 8

espero que ayude. Normalmente uso funciones, en cambio escribo todo el código cada vez.

$("#action_selector").change(function() { 

     ajaxObj = $.ajax({ 
      url: 'YourURL', 
      type: 'POST', // You can use GET 
      data: 'parameter1=value1', 
      dataType: "json", 
      context: this,     
      success: function (data) { 
       json: data    
      }, 
      error: function (request) { 
       $(".return-json").html("Some error!"); 
      } 
     }); 

     json_obj = $.parseJSON(ajaxObj.responseText);    

     var options = $("#selector"); 
     options.empty(); 
     options.append(new Option("-- Select --", 0)); 
     $.each(ajx_obj, function() { 
      options.append(new Option(this.text, this.value)); 
     }); 
    }); 
}); 

Answer 9

He leído que el uso de document fragments es performant porque evita la página de reflujo en cada inserción del elemento DOM, también es bien soportado por todos los navegadores (incluso IE 6).

var fragment = document.createDocumentFragment(); 
 

 
$.each(result, function() { 
 
    fragment.appendChild($("<option />").val(this.ImageFolderID).text(this.Name)[0]); 
 
}); 
 

 
$("#options").append(fragment);

leí por primera vez acerca de esto en CodeSchool's JavaScript Best Practices course.

Aquí hay un comparison of different approaches, gracias al autor.

Answer 10

Me pareció que para estar trabajando desde el sitio jQuery

$.getJSON("/Admin/GetFolderList/", function(data) { 
    var options = $("#dropdownID"); 
    $.each(data, function(key, val) { 
    options.append(new Option(key, val)); 
    }); 
}); 

Answer 11

Otro enfoque con ES6

fetch('https://restcountries.eu/rest/v1/all') 
    .then((response) => { 
    return response.json() 
    }) 
    .then((countries) => { 
    var options = document.getElementById('someSelect'); 
    countries.forEach((country) => { 
     options.appendChild(new Option(country.name, country.name)); 
    }); 
    }) 

Answer 12

He estado usando jQuery y llamar a una función para poblar menús desplegables.

function loadDropDowns(name,value) 
{ 
    var ddl = "#Categories"; 
    $(ddl).append('<option value="' + value + '">' + name + "</option>'"); 
} 

Answer 13

function LoadCategories() { 
    var data = []; 
    var url = '@Url.Action("GetCategories", "InternalTables")'; 
    $.getJSON(url, null, function (data) { 
     data = $.map(data, function (item, a) { 
      return "<option value=" + item.Value + ">" + item.Description + "</option>"; 
     }); 
     $("#ddlCategory").html('<option value="0">Select</option>'); 
     $("#ddlCategory").append(data.join("")); 
    }); 
} 

Answer 14

function generateYears() { 
        $.ajax({ 
         type: "GET", 
         url: "getYears.do", 
         data: "", 
         dataType: "json", 
         contentType: "application/json", 
         success: function(msg) { 
          populateYearsToSelectBox(msg); 
         } 
        }); 
} 

function populateYearsToSelectBox(msg) { 
    var options = $("#selectYear"); 
$.each(msg.dataCollecton, function(val, text) { 
    options.append(
     $('<option></option>').val(text).html(text) 
    ); 
}); 
} 

Answer 15

aquí es un ejemplo que hice sobre el cambio me sale hijos de la primera seleccionar en la segunda seleccionar

jQuery(document).ready(function($) { 
$('.your_select').change(function() { 
    $.ajaxSetup({ 
     headers:{'X-CSRF-TOKEN': $("meta[name='csrf-token']").attr('content')} 
    }); 

    $.ajax({ 
     type:'POST', 
     url: 'Link', 
     data:{ 
      'id': $(this).val() 
     }, 
     success:function(r){ 
      $.each(r, function(res) { 
       console.log(r[res].Nom); 
       $('.select_to_populate').append($("<option />").val(r[res].id).text(r[res].Nom)); 
      }); 
     },error:function(r) { 
      alert('Error'); 
     } 
    }); 
}); 

}); enter code here