llamar - javascript y jquery pdf

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

Question

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

Estoy buscando algo para lo que no necesito un complemento, pero también estaría interesado en 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:

Esta es una versión limpia y simplificada 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 ().

Answer 1

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));
}

Answer 2

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

Así que la mejor solución es la siguiente.

Si la respuesta de datos JSON es

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

usalo como

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

Answer 3

@joshperry

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

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

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

Answer 4

Adviértase ... 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 hacer funcionar el método .append (). 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 5

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

Vea los pensamientos de John Resig al respecto ...

Algo a lo largo de las líneas 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 6

Combino las dos mejores respuestas en una gran respuesta.

var outputConcatenation = [];

$.each(selectValues, function(i, item) {   
     outputConcatenation.push($("<option></option>").attr("value", item.key).attr("data-customdata", item.customdata).text(item.text).prop("outerHTML"));
});

$("#myselect").html(outputConcatenation.join(''''));

Answer 7

El formato JSON:

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

Y el código jQuery para completar los valores del menú desplegable en el éxito 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 8

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 solo haz lo siguiente:

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

Answer 9

Encontré 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 10

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

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 11

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

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

Answer 12

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 esta, utilizando una matriz, no la concatenación de cadenas, y utilizando solo una llamada adjunta.

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

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

Answer 13

Hay un enfoque que utiliza el enfoque de plantilla de Microsoft que actualmente está siendo propuesto para su inclusión en el núcleo de jQuery. Hay más poder en el uso de las plantillas, por lo que, para el escenario más simple, puede que no sea la mejor opción. Para más detalles, vea la publicación de Scott Gu que describe las características.

Primero incluye 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 tus datos llama al método .render ()

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

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

He blogged este enfoque con más detalle.

Answer 14

Hay un problema de clasificación con esta solución en Chrome (jQuery 1.7.1) (¿Chrome ordena las propiedades del objeto por nombre / número?) Así que para mantener el orden (sí, es objeto de abuso), 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 el $. cada uno se verá como:

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

Answer 15

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 de DOM para un mejor rendimiento.

Así que, en lugar de agregar cada elemento dentro de un bucle, es mejor recopilar los elementos dentro de un bucle y agregarlos una vez que se haya completado.

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

Adjuntarlo,

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

o mejor

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

Answer 16

Igual que otras respuestas, de manera jQuery:

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

Answer 17

La forma más sencilla es:

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

Answer 18

Otra forma de hacerlo:

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

Answer 19

Simplemente puede iterar sobre su matriz json con el siguiente código

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

Answer 20

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 totalmente compatible con todos los navegadores.

Answer 21

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

Answer 22

Un compromiso de tipo 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 el map y luego los agrega a la Selección de una vez usando apply para enviar cada Opción como un argumento separado en la función de append .

Answer 23

Usando el complemento DOM Elements Creator (mi favorito):

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

Usando el constructor de Option (no estoy seguro sobre el soporte del navegador):

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

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

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

Answer 24

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

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

Answer 25

 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 esto, creo, hace el trabajo más rápido. :PAG

Answer 26

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

Answer 27

<!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 28

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 ver el artículo completo sobre el uso de listas dinámicas con ASP.NET MVC y jQuery, visite: http://www.codecapers.com/post/Dynamic-Select-Lists-with-MVC-and-jQuery.aspx

Answer 29

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 la primera construcción de una cadena gigante.

Answer 30

var output = [];

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

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

De esta manera usted "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 haga algún análisis en el html () método)