Jaki jest najlepszy sposób na dodanie opcji do select from jako obiektu JS za pomocą jQuery?

var output = [];

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

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

W ten sposób "dotykasz DOM" tylko jeden raz.

Nie jestem pewien, czy najnowszą linię można przekonwertować na $('#mySelect').html (wyj.join(")) bo nie znam jQuery (może robi parsowanie w metodzie html() )

To jest nieco szybsze i czystsze.

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

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

Użycie Dom Elements Creator plugin (Moje ulubione):

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

Użycie konstruktora Option (nie jestem pewien co do obsługi przeglądarki):

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

Using document.createElement (avoiding extra work parsing HTML with $("<option></option>")):

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

To wygląda ładniej, zapewnia czytelność, ale jest wolniejsze niż inne metody.

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

Jeśli chcesz prędkości, najszybszy (testowany!) sposób jest taki, używając tablicy, a nie string concatenation, i używając tylko jednego wywołania append.

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

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

Wszystkie te odpowiedzi wydają się niepotrzebnie skomplikowane. Wszystko czego potrzebujesz to:

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

To jest całkowicie kompatybilne między przeglądarkami.

@joshperry

Wydaje się, że zwykły .append działa również zgodnie z oczekiwaniami,

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

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

Być forwarned... Używam jQuery Mobile 1. 0B2 z PhoneGap 1.0.0 na Androidzie 2.2 (Cyanogen 7.0.1) telefon (T-Mobile G2) i nie można uzyskać .metoda append () w ogóle działa. Musiałem użyć .html() jak następuje:

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

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

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

Istnieje podejście wykorzystujące Microsoft Templating approach , które jest obecnie przedmiotem propozycji włączenia do jQuery core. Jest więcej mocy w korzystaniu z szablonów, więc dla najprostszego scenariusza może to nie być najlepsza opcja. Więcej szczegółów można znaleźć w poście Scotta Gu opisującym funkcje.

Najpierw Dołącz plik JS z szablonem, dostępny z github .

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

Następna konfiguracja szablonu

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

Następnie z danymi zadzwoń .render() metoda

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

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

I ' ve blogged to podejście bardziej szczegółowo.

Zrobiłem coś takiego, Ładowanie rozwijanej pozycji przez Ajax . Powyższa odpowiedź jest również akceptowalna, ale zawsze dobrze jest mieć jak najmniej modyfikacji DOM dla lepszej wydajności.

Więc zamiast dodawać każdy element wewnątrz pętli, lepiej jest zbierać elementy w pętli i dodawać je po jej zakończeniu.

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

Dołącz go,

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

Or even better

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

Pewnego rodzaju kompromis między dwoma głównymi odpowiedziami, w "jednowierszowym":

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

Tworzy tablicę elementów opcji za pomocą map, a następnie dołącza je wszystkie Do Select na raz za pomocą apply, Aby wysłać każdą opcję jako osobny argument w funkcji append.

Prosty sposób to:

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

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

Działa dobrze z jQuery 1.4.1.

Do pełnego artykułu do korzystania z list dynamicznych z ASP.NET wizyta MVC & jQuery: http://www.codecapers.com/post/Dynamic-Select-Lists-with-MVC-and-jQuery.aspx

Jest problem z sortowaniem tego rozwiązania w Chrome (jQuery 1.7.1) (Chrome sortuje właściwości obiektu według nazwy/numeru?) Aby zachować porządek (tak, to obiekt nadużywający), zmieniłem to:

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

Do tego

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

A potem $.każdy będzie wyglądał następująco:

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

Yet another way of doing it:

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

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

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

To manipuluje DOM tylko raz po pierwszym zbudowaniu gigantycznego ciągu.

Chociaż poprzednie odpowiedzi są poprawnymi odpowiedziami - wskazane może być najpierw dołączenie ich do documentFragmnet, a następnie dołączenie tego fragmentu dokumentu jako elementu...

Zobacz przemyślenia Johna Resiga na ten temat ...

Coś w rodzaju:

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

1. $.each jest wolniejsza niż pętla for
2. za każdym razem Wybór DOM nie jest najlepszą praktyką w pętli $("#mySelect").append();

Więc najlepszym rozwiązaniem jest następujące

Jeśli dane JSON resp to

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

Użyj go jako

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

Zamiast powtarzania wszędzie tego samego kodu, sugerowałbym, aby bardziej pożądane było napisanie własnej funkcji jQuery, takiej jak:

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

Następnie, aby dodać opcję, wykonaj następujące czynności:

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

Możesz po prostu iterować na tablicy json za pomocą następującego kodu

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

Plugin jQuery można znaleźć tutaj: http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/.

Stwierdziłem, że jest to proste i działa świetnie.

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

To właśnie zrobiłem z tablicami dwuwymiarowymi: pierwszą kolumną jest pozycja i, dodaj do {[2] } z <option>. Druga kolumna to record_id i, dodaj do value z <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();
       }
   }
   

Format JSON:

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

I Kod jQuery, aby wypełnić wartości rozwijanej po sukcesie 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
}

Używając $.funkcja map (), możesz to zrobić w bardziej elegancki sposób:

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

Łączę dwie najlepsze odpowiedzi w świetną odpowiedź.

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

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

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