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

Question

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

Estoy buscando algo para lo que no necesito un complemento, pero también me interesarían los complementos que existen.

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:

Esta es una versión limpia y simplificada. versión de matdumsa:

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

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

Answer 1

Igual que otras respuestas, de manera jQuery:

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

Answer 2

var output = [];

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

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

De esta manera, & "; 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 conozco las partes internas de jQuery (tal vez hace algún análisis en el html () método)

Answer 3

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="mySelect"></select>

Answer 4

jQuery

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

JavaScript de vainilla

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

Answer 5

Uso de Complemento DOM Elements Creator (mi favorito):

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

Uso del constructor Option (no estoy seguro acerca de la compatibilidad del navegador):

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

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

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

Answer 6

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 quieres velocidad, la forma más rápida (¡probada!) es esto, usando una matriz, no una concatenación de cadenas, y usando solo una llamada anexa.

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

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

Answer 7

@joshperry

Parece que .append también funciona como se esperaba,

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

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

Answer 8

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 el navegador.

Answer 9

Tenga cuidado ... Estoy usando jQuery Mobile 1.0b2 con PhoneGap 1.0.0 en un teléfono Android 2.2 (Cyanogen 7.0.1) (T-Mobile G2) y no pude conseguir que el método .append () funcione todos. Tuve que usar .html () como sigue:

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

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

Answer 10

 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('');

He hecho algunas pruebas y creo que esto hace el trabajo más rápido. : P

Answer 11

Hay un enfoque que utiliza el enfoque de plantilla de Microsoft que se encuentra actualmente en propuesta para su inclusión en jQuery core. Hay más poder en el uso de plantillas, por lo que para el escenario más simple, puede que no sea la mejor opción. Para obtener más detalles, consulte la publicación de Scott Gu que describe las características.

Primero incluya el archivo js de plantillas, disponible en github .

<script src="Scripts/jquery.tmpl.js" type="text/javascript" />

Siguiente configurar una plantilla

<script id="templateOptionItem" type="text/html">
    <option value=\'{{= Value}}\'>{{= Text}}</option>
</script>

Luego, con sus datos, llame al método .render ()

var someData = [
    { Text: "one", Value: "1" },
    { Text: "two", Value: "2" },
    { Text: "three", Value: "3"}];

$("#templateOptionItem").render(someData).appendTo("#mySelect");

Tengo blogueó este enfoque con más detalle.

Answer 12

He hecho algo como esto, cargando un elemento desplegable a través de Ajax . La respuesta anterior también es aceptable, pero siempre es bueno tener la menor modificación posible del DOM para un mejor rendimiento.

Entonces, en lugar de agregar cada elemento dentro de un ciclo, es mejor recolectar elementos dentro de un ciclo y agregarlo una vez que se haya completado.

$(data).each(function(){
    ... Collect items
})

Añádelo,

$('#select_id').append(items); 

o incluso mejor

$('#select_id').html(items);

Answer 13

Una especie de compromiso entre las dos respuestas principales, en un " one-liner " ;:

$.fn.append.apply($('mySelect'),
    $.map(selectValues, function(val, idx) {
        return $("<option/>")
            .val(val.key)
            .text(val.value);
    })
);

Construye una matriz de elementos de Opción usando mapa y luego los agrega a todos al Seleccionar a la vez usando apply para enviar cada Opción como un argumento separado en la función append.

Answer 14

La forma simple es:

$('#SelectId').html("<option value='0'>select</option><option value='1'>Laguna</option>");

Answer 15

En lugar de repetir el mismo código en todas partes, sugeriría que es más conveniente escribir su propia función jQuery como:

jQuery.fn.addOption = function (key, value) {
    $(this).append($('<option>', { value: key }).text(value));
};

Luego, para agregar una opción, simplemente haga lo siguiente:

$('select').addOption('0', 'None');

Answer 16

function populateDropdown(select, data) {   
    select.html('');   
    $.each(data, function(id, option) {   
        select.append($('<option></option>').val(option.value).html(option.name));   
    });          
}   

Funciona bien con jQuery 1.4.1.

Para un artículo completo sobre el uso de listas dinámicas con ASP.NET MVC & amp; Visita de jQuery: http://www.codecapers.com/post /Dynamic-Select-Lists-with-MVC-and-jQuery.aspx

Answer 17

1. $.each es más lento que un for bucle
2. Cada vez, una selección DOM no es la mejor práctica en el bucle $("#mySelect").append();

Entonces, la mejor solución es la siguiente

Si los datos JSON resp son

[
    {"id":"0001", "name":"Mr. P"},
    {"id":"0003", "name":"Mr. Q"},
    {"id":"0054", "name":"Mr. R"},
    {"id":"0061", "name":"Mr. S"}
]

úsalo como

var option = "";
for (i=0; i<resp.length; i++) {
    option += "<option value='" + resp[i].id + "'>" + resp[i].name + "</option>";
}
$('#mySelect').html(option);

Answer 18

Hay un problema de clasificación con esta solución en Chrome (jQuery 1.7.1) (¿Chrome ordena las propiedades de los objetos por nombre / número?) Entonces, para mantener el orden (sí, es abuso de objetos), cambié esto:

optionValues0 = {"4321": "option 1", "1234": "option 2"};

a esto

optionValues0 = {"1": {id: "4321", value: "option 1"}, "2": {id: "1234", value: "option 2"}};

y luego $ .each se verá así:

$.each(optionValues0, function(order, object) {
  key = object.id;
  value = object.value;
  $('#mySelect').append($('<option>', { value : key }).text(value));
}); 

Answer 19

Otra forma de hacerlo:

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

Answer 20

if (data.length != 0) {
    var opts = "";
    for (i in data)
        opts += "<option value='"+data[i][value]+"'>"+data[i][text]+"</option>";

    $("#myselect").empty().append(opts);
}

Esto manipula el DOM solo una vez después de construir primero una cadena gigante.

Answer 21

Aunque las respuestas anteriores son todas respuestas válidas, puede ser aconsejable agregar todas estas a un documentFragmnet primero, luego agregar ese fragmento de documento como un elemento después de ...

Ver pensamientos de John Resig sobre el asunto ...

Algo en la línea de:

var frag = document.createDocumentFragment();

for(item in data.Events)
{
    var option = document.createElement("option");

    option.setAttribute("value", data.Events[item].Key);
    option.innerText = data.Events[item].Value;

    frag.appendChild(option);
}
eventDrop.empty();
eventDrop.append(frag);

Answer 22

Puede simplemente iterar sobre su matriz json con el siguiente código

$('<option/>').attr("value","someValue").text("Option1").appendTo("#my-select-id");

Answer 23

Se puede encontrar un complemento jQuery aquí: http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/ .

Answer 24

Eso es lo que hice con las matrices bidimensionales: la primera columna es el elemento i, agregue a innerHTML de <option>. La segunda columna es record_id i, agregue value a <=>:

1. PHP

   $items = $dal->get_new_items(); // Gets data from the database
   $items_arr = array();
   $i = 0;
   foreach ($items as $item)
   {
       $first_name = $item->first_name;
       $last_name = $item->last_name;
       $date = $item->date;
       $show = $first_name . " " . $last_name . ", " . $date;
       $request_id = $request->request_id;
       $items_arr[0][$i] = $show;
       $items_arr[1][$i] = $request_id;
       $i++;
   }
   
   echo json_encode($items_arr);
   

2. JavaScript / Ajax

           function ddl_items() {
               if (window.XMLHttpRequest) {
                   // Code for Internet Explorer 7+, Firefox, Chrome, Opera, and Safari
                   xmlhttp=new XMLHttpRequest();
               }
               else{
                   // Code for Internet Explorer 6 and Internet Explorer 5
                   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
               }
   
               xmlhttp.onreadystatechange=function() {
               if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                   var arr = JSON.parse(xmlhttp.responseText);
                   var lstbx = document.getElementById('my_listbox');
   
                   for (var i=0; i<arr.length; i++) {
                       var option = new Option(arr[0][i], arr[1][i]);
                       lstbx.options.add(option);
                   }
               }
           };
   
           xmlhttp.open("GET", "Code/get_items.php?dummy_time=" + new Date().getTime() + "", true);
           xmlhttp.send();
       }
   }
   

Answer 25

El formato JSON:

[{
    "org_name": "Asset Management"
}, {
    "org_name": "Debt Equity Foreign services"
}, {
    "org_name": "Credit Services"
}]

Y el código jQuery para llenar los valores del menú desplegable en el éxito de Ajax:

success: function(json) {
    var options = [];
    $('#org_category').html('');  // Set the Dropdown as Blank before new Data
    options.push('<option>-- Select Category --</option>');
    $.each(JSON.parse(json), function(i, item) {
        options.push($('<option/>',
        {
           value: item.org_name, text: item.org_name
        }));
    });
    $('#org_category').append(options);  // Set the Values to Dropdown
}

Answer 26

Descubrí que esto es simple y funciona muy bien.

for (var i = 0; i < array.length; i++) {
    $('#clientsList').append($("<option></option>").text(array[i].ClientName).val(array[i].ID));
};

Answer 27

Usando la función $ .map (), puede hacer esto de una manera más elegante:

$('#mySelect').html( $.map(selectValues, function(val, key){
    return '<option value="' + val + '">'+ key + '</option>';
}).join(''));

Answer 28

<!DOCTYPE html>
<html lang="en">
<head>
  <title>append selectbox using jquery</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script type="text/javascript">
    function setprice(){
        var selectValues = { "1": "test 1", "2": "test 2" };
        $.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value",key)
                    .text(value)); 
});

    }
  </script>
</head>
<body onload="setprice();">


      <select class="form-control" id="mySelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>


</body>
</html>

Answer 29

Configure su ID de selección HTML en la siguiente línea a continuación.aquí mySelect se utiliza como identificación del elemento seleccionado.

   var options = $("#mySelect");

luego obtenga el objeto que es selectValues ​​en este escenario y lo establece en jquery para cada bucle.Utilizará el valor y el texto de los objetos en consecuencia y los agregará a las selecciones de opciones de la siguiente manera.

$.each(selectValues, function(val, text) {
            options.append(
             $('<option></option>').val(val).html(text)
          );
      });

Esto mostrará el texto como la lista de opciones cuando se seleccione la lista desplegable y una vez que se seleccione un texto, se utilizará el valor del texto seleccionado.

P.ej.

"1":"Prueba 1", "2":"prueba 2",

Desplegable,

nombre para mostrar:prueba 1 -> valor es 1 Nombre para mostrar:prueba 2 -> el valor es 2

Answer 30

Decidí sonar un poco.

1. Tratar con la opción seleccionada previamente; algunos navegadores se estropean cuando agregamos
2. SOLO presione DOM una vez con el anexo
3. Trate con la propiedad multiple mientras agrega más opciones
4. Mostrar cómo usar un objeto
5. Mostrar cómo mapear usando una matriz de objetos

// objects as value/desc
let selectValues = {
  "1": "test 1",
  "2": "test 2",
  "3": "test 3",
  "4": "test Four"
};
//use div here as using "select" mucks up the original selected value in "mySelect"
let opts = $("<div />");
let opt = {};
$.each(selectValues, function(value, desc) {
  opts.append($('<option />').prop("value", value).text(desc));
});
opts.find("option").appendTo('#mySelect');

// array of objects called "options" in an object
let selectValuesNew = {
  options: [{
      value: "1",
      description: "2test 1"
    },
    {
      value: "2",
      description: "2test 2",
      selected: true
    },
    {
      value: "3",
      description: "2test 3"
    },
    {
      value: "4",
      description: "2test Four"
    }
  ]
};

//use div here as using "select" mucks up the original selected value
let opts2 = $("<div />");
let opt2 = {}; //only append after adding all options
$.map(selectValuesNew.options, function(val, index) {
  opts2.append($('<option />')
    .prop("value", val.value)
    .prop("selected", val.selected)
    .text(val.description));
});
opts2.find("option").appendTo('#mySelectNew');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="mySelect">
  <option value="" selected="selected">empty</option>
</select>

<select id="mySelectNew" multiple="multiple">
  <option value="" selected="selected">2empty</option>
</select>