Pregunta jQuery: ¿Mejor práctica para poblar desplegable?


El ejemplo que veo publicado todo el tiempo parece que no es óptimo, ya que implica 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 mejor manera?


237
2018-05-02 16:10


origen


Respuestas:


Andreas Grech estuvo muy cerca ... es en realidad this (tenga en cuenta la referencia a this en lugar del elemento en el bucle):

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

390
2018-05-04 02:29



$.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 arriba es crear un nuevo <option> elemento y agregarlo a la options lista (asumiendo options es la ID de un elemento desplegable.

PD: mi javascript está un poco oxidado, por lo que la sintaxis puede no ser perfecta


63
2018-05-02 16:16



Claro - hacer options una serie de cadenas y uso .join('') más bien que += cada vez que pasa el ciclo Ligero golpe de rendimiento cuando se trata de 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. Lo creas o no, esa es la manera más rápida de construir un fragmento de DOM ... Ahora, si solo tienes unas pocas opciones, no importará: utiliza la técnica Dreas demuestra si te 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 ciclo ... con un número suficiente de opciones. terminará pagándolo, especialmente en navegadores más antiguos.

Nota: Como lo señala Justice, esto se derrumbará si ImageFolderID y Name no son codificado correctamente...


35
2018-05-02 16:23



O tal vez:

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

20
2018-04-19 10:04



La manera más rápida es esta:

 $.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 a este enlace es la forma más rápida porque envuelve todo en un solo elemento al realizar cualquier tipo de inserción de DOM.


15
2017-07-01 08:50



Encontré que esto está funcionando desde el sitio de jquery

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

9
2018-03-16 09:00



Yo uso el selectboxes jquery plugin. Convierte tu ejemplo en:

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

2
2018-05-02 16:17