Pregunta ¿Cuál es la mejor manera de agregar opciones a una selección como objeto JS con jQuery?


¿Cuál es el mejor método para agregar opciones a un <select> desde un objeto JavaScript usando jQuery?

Estoy buscando algo que no necesite un complemento, pero también me interesarían los complementos que están disponibles.

Esto es lo que hice:

selectValues = { "1": "test 1", "2": "test 2" };

for (key in selectValues) {
  if (typeof (selectValues[key] == 'string') {
    $('#mySelect').append('<option value="' + key + '">' + selectValues[key] + '</option>');
  }
}

Una solución limpia / simple:

Esto es una limpieza y simplificado versión de matdumsa:

$.each(selectValues, function(key, value) {
     $('#mySelect')
          .append($('<option>', { value : key })
          .text(value));
});

Cambios de matdumsa: (1) eliminó la etiqueta de cierre para la opción dentro de append () y (2) movió las propiedades / atributos a un mapa como el segundo parámetro de append ().


1204
2017-10-04 20:58


origen


Respuestas:


Lo mismo que otras respuestas, en jQuery moda:

$.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value",key)
                    .text(value)); 
});

1222
2017-10-04 21:12



var output = [];

$.each(selectValues, function(key, value)
{
  output.push('<option value="'+ key +'">'+ value +'</option>');
});

$('#mySelect').html(output.join(''));

De esta forma, "toca el DOM" solo una vez.

No estoy seguro de si la última línea se puede convertir en $ ('# mySelect'). Html (output.join ('')) porque no sé las partes internas de jQuery (tal vez se hace un análisis en el html () método)


238
2017-11-05 19:42



Esto es un poco más rápido y más limpio.

$.each(selectValues, function(key, value) {
    $('#mySelect').append($("<option/>", {
        value: key,
        text: value
    }));
});

181
2017-07-01 07:00



jQuery

var list = $("#selectList");
$.each(items, function(index, item) {
  list.append(new Option(item.text, item.value));
});

Vanilla JavaScript

var list = document.getElementById("selectList");
for(var i in items) {
  list.add(new Option(items[i].text, items[i].value));
}

77
2018-05-31 22:52



Utilizando Complemento DOM Elements Creator (mi favorito):

$.create('option', {'value': 'val'}, 'myText').appendTo('#mySelect');

Utilizando el Option constructor (no estoy seguro del soporte del navegador):

$(new Option('myText', 'val')).appendTo('#mySelect');

Utilizando document.createElement (evitando trabajo adicional analizando HTML con $("<option></option>"))

$('#mySelect').append($(document.createElement("option")).
                        attr("value","val").text("myText"));

30
2017-10-05 15:49



Esto se ve mejor, proporciona legibilidad, pero es más lento que otros métodos.

$.each(selectData, function(i, option)
{
    $("<option/>").val(option.id).text(option.title).appendTo("#selectBox");
});

Si desea velocidad, la forma más rápida (¡probada!) Es la siguiente, utilizando una matriz, sin concatenación de cadenas, y utilizando solo una llamada de adición.

auxArr = [];
$.each(selectData, function(i, option)
{
    auxArr[i] = "<option value='" + option.id + "'>" + option.title + "</option>";
});

$('#selectBox').append(auxArr.join(''));

25
2017-12-21 15:50



Todas estas respuestas parecen innecesariamente complicadas. Todo lo que necesitas es:

var options = $('#mySelect').get(0).options;
$.each(selectValues, function(key, value) {
        options[options.length] = new Option(value, key);
});

Eso es completamente compatible con navegador cruzado.


17
2017-10-11 17:20



@joshperry

Parece que solo .adjuntar también funciona como se esperaba,

$("mySelect").append(
  $.map(selectValues, function(v,k){

    return $("<option>").val(k).text(v);
  })
);

15
2018-04-17 11:29



 var output = [];
 var length = data.length;
 for(var i = 0; i < length; i++)
 {
    output[i++] = '<option value="' + data[i].start + '">' + data[i].start + '</option>';
 }

 $('#choose_schedule').get(0).innerHTML = output.join('');

Hice algunas pruebas y creo que esto hace el trabajo más rápido. :PAG


14
2017-11-09 06:29



Avisado ... estoy usando jQuery Mobile 1.0b2 con PhoneGap 1.0.0 en un (7.0.1 cianógeno) teléfono Android 2.2 (T-Mobile G2) y no podía conseguir el método .Append () para trabajar en absoluto. Tuve que usar .html () de la siguiente manera:

var options;
$.each(data, function(index, object) {
    options += '<option value="' + object.id + '">' + object.stop + '</option>';
});

$('#selectMenu').html(options);

12
2017-09-16 13:22