Что является лучшим способом, чтобы добавить опции, чтобы выбрать из, как объект JS с помощью jQuery?

var output = [];

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

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

таким образом, вы" касаетесь DOM " только один раз.

Я не уверен, что последняя строка может быть преобразована в $('#mySelect').html (вывод.join (")) потому что я не знаю jQuery internals (возможно, он делает некоторый разбор в методе html)

Это немного быстрее и чище.

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

Ванильный JavaScript

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

используя DOM Elements Creator plugin (мой любимый):

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

С помощью Option конструктор (не уверен в поддержке браузера):

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

используя document.createElement (избегая дополнительной работы разбора HTML с $("<option></option>")):

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

это выглядит лучше, обеспечивает читаемость, но медленнее, чем другие методы.

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

Если вы хотите скорость, самый быстрый (проверено!) способ заключается в использовании массива, а не конкатенации строк и использовании только одного вызова append.

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

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

все эти ответы кажутся излишне сложными. Все, что вам нужно, это:

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

это полностью кросс-браузер совместимый.

@joshperry

Кажется, что равнина .добавить также работает, как ожидалось,

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

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

быть насторожился... Я использую jQuery Mobile 1. 0b2 с PhoneGap 1.0.0 на Android 2.2 (Cyanogen 7.0.1) телефон (T-Mobile G2) и не мог получить .добавить () метод для работы на всех. Я должен был использовать .html () как следует:

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

Я сделал несколько тестов, и это, я считаю, делает работу быстрее. : P

есть подход с использованием Microsoft Templating approach в настоящее время это предложение для включения в ядро jQuery. Есть больше возможностей в использовании шаблонов, поэтому для самого простого сценария это может быть не лучшим вариантом. Для получения более подробной информации см. сообщение Скотта ГУ, описывающее функции.

сначала включите шаблон js-файла, доступный из github.

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

следующая настройка шаблона

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

затем с ваши данные назовите своими .метод render ()

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

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

Я в блоге этот подход более подробно.

Я сделал что-то вроде этого, загрузка выпадающего списка через Ajax. Ответ выше также приемлем, но всегда хорошо иметь как можно меньше модификаций DOM для лучшей производительности.

поэтому вместо того, чтобы добавлять каждый элемент внутри цикла, лучше собирать элементы внутри цикла и добавлять его после его завершения.

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

добавить он,

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

или еще лучше

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

компромисс между двумя верхними ответами, в "однострочном":

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

создает массив элементов Option с помощью карта а затем добавляет их все в Select сразу с помощью apply чтобы отправить каждый параметр в качестве отдельного аргумента на

простой способ:

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

Он хорошо работает с jQuery 1.4.1.

для полной статьи для использования динамических списков с ASP.NET визит MVC & jQuery: http://www.codecapers.com/post/Dynamic-Select-Lists-with-MVC-and-jQuery.aspx

существует проблема сортировки с этим решением в Chrome (jQuery 1.7.1) (Chrome сортирует свойства объекта по имени/номеру?) Поэтому, чтобы сохранить порядок (да, это злоупотребление объектом), я изменил это:

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

этой

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

и затем $.каждый будет выглядеть так:

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

еще один способ сделать это:

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

это манипулирует DOM только один раз после первого построения гигантской строки.

хотя все предыдущие ответы являются допустимыми ответами - может быть целесообразно сначала добавить все это в documentFragmnet, а затем добавить этот фрагмент документа в качестве элемента после...

посмотреть мысли Джона об отставке по этому вопросу...

что-то вроде:

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 медленнее, чем a for цикл
2. каждый раз, выбор DOM не является лучшей практикой в цикле $("#mySelect").append();

таким образом, лучшим решением является следующее

если данные JSON resp и

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

использовать его как

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

вместо того, чтобы повторять один и тот же код везде, я бы предложил, что более желательно написать свою собственную функцию jQuery, такую как:

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

затем, чтобы добавить опцию, просто сделайте следующее:

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

вы можете просто перебирать массив json со следующим кодом

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

плагин jQuery можно найти здесь: http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/.

Я обнаружил, что это просто и отлично работает.

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

вот что я сделал с двумерными массивами: первый столбец-item i, add to innerHTML на <option>. Второй столбец-record_id i, добавьте к value на <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();
       }
   }
   

формат JSON:

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

и код jQuery для заполнения значений в раскрывающемся списке на успех 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
}

использование $.функция map (), вы можете сделать это более элегантно:

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

я объединяю два лучших ответа в отличный ответ.

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>