Так же, как и другие ответы, в стиле jQuery:

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

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

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

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

Добавьте это,

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

или даже лучше

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

Если вам не нужно поддерживать старые версии IE, очевидно, что использование Конструктор Option - лучший вариант, удобочитаемое и эффективное решение:

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

По функциональности он эквивалентен, но чище, чем:

$("<option></option>").attr("value", "val").text("myText")).appendTo('#mySelect');

var output = [];

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

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

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

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

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

Я провел несколько тестов, и я считаю, что это работает быстрее всего. :П

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

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

Если вам нужна скорость, самый быстрый (проверенный!) Способ - это использовать массив, а не конкатенацию строк, и использовать только один вызов добавления.

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

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

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, посетите:

Списки динамического выбора с помощью MVC и jQuery

Самый простой способ:

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

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

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>

Существует подход с использованием Подход Microsoft Templating, который в настоящее время предлагается для включения в ядро ​​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");

У меня блоггинг этот подход более подробно.

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

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

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

Обновление этого ответа до более идиоматического функционального метода (с использованием современного JS) может быть сформировано для вызова append только один раз, с массивом элементов option, созданным с использованием карта и конструктора элементов Option.

Использование элемента DOM Option должно уменьшить накладные расходы на вызов функции, поскольку элемент option не нужно обновлять после создания, а логика синтаксического анализа jQuery не требуется.

$('mySelect').append($.map(selectValues, (k, v) => new Option(k, v)))

Это можно упростить еще больше, если вы создадите служебную функцию factory, которая будет обновлять объект option:

const newoption = (...args) => new Option(...args)

Затем это можно передать непосредственно в map:

$('mySelect').append($.map(selectValues, newoption))

Предыдущая формулировка

Поскольку append также позволяет передавать значения в виде переменного числа аргументов, мы можем предварительно создать список элементов optionкарта и добавить их в качестве аргументов в одном вызове с помощью apply.

$.fn.append.apply($('mySelect'), $.map(selectValues, (k, v) => $("<option/>").val(k).text(v)));

Похоже, что в более поздних версиях jQuery append также принимает аргумент массива, и это можно несколько упростить:

$('mySelect').append($.map(selectValues, (k, v) => $("<option/>").val(k).text(v)))

Плагин jQuery можно найти здесь: Автоматическое заполнение полей выбора с помощью jQuery и AJAX.

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

Предупреждаем ... Я использую jQuery Mobile 1.0b2 с PhoneGap 1.0.0 на телефоне Android 2.2 (Cyanogen 7.0.1) (T-Mobile G2) и не могу заставить работать метод .append (). Мне пришлось использовать .html () следующим образом:

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

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

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

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

Вот что я сделал с двумерными массивами: первый столбец - это элемент i, добавляемый к 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();
       }
   }
   

Проблема с сортировкой этого решения в 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 будет выглядеть так:

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

Хотя все предыдущие ответы являются действительными ответами - может быть целесообразно сначала добавить все это в 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);

Доработка старого @ ответ Джошперри:

Кажется, что обычный .append тоже работает должным образом,

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

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

или короче,

$("#mySelect").append(
  $.map(selectValues, (v,k) => $("<option>").val(k).text(v))
  // $.map(selectValues, (v,k) => new Option(v, k)) // using plain JS
);

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

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 только один раз после первого построения гигантской строки.

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

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

Это полностью кроссбраузерно.

1. $.each медленнее, чем петля 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);

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

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

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

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

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

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

Формат 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(''));

$.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>

Задайте идентификатор выбора HTML в следующей строке ниже. Здесь mySelect используется как идентификатор элемента select.

   var options = $("#mySelect");

затем получите объект, который является selectValues ​​в этом сценарии, и установите его в jquery для каждого цикла. Он будет использовать значение и текст объектов соответственно и добавит их в выборку следующим образом.

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

Это отобразит текст в виде списка опций, когда выбран раскрывающийся список, и после выбора текста будет использоваться значение выбранного текста.

Например.

«1»: «тест 1», «2»: «тест 2»,

Падать,

отображаемое имя: тест 1 -> значение 1 отображаемое имя: тест 2 -> значение 2

Я решил немного вмешаться.

1. Разобраться с ранее выбранным вариантом; некоторые браузеры дают сбой, когда мы добавляем
2. ТОЛЬКО нажмите DOM один раз с добавлением
3. Разберитесь со свойством multiple при добавлении дополнительных опций
4. Показать, как использовать объект
5. Показать, как составить карту с использованием массива объектов

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

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

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

http://learn.jquery.com/performance/append-outside-loop/

Поскольку JQuery append может принимать массив в качестве аргумента, я удивлен, что никто не предложил сделать это однострочным с map.

$('#the_select').append(['a','b','c'].map(x => $('<option>').text(x)));

или reduce

['a','b','c'].reduce((s,x) => s.append($('<option>').text(x)), $('#the_select'));

Получение ключей объекта для получения значений объекта. Использование map () для добавления новых опций.

const selectValues = {
  "1": "test 1",
  "2": "test 2"
}
const selectTest = document.getElementById('selectTest')
Object.keys(selectValues).map(key => selectTest.add(new Option(selectValues[key], key)))

<select id = "selectTest"></select>

Чистый JS

В чистом JS добавление следующей опции для выбора проще и проще

mySelect.innerHTML+= `<option value = "${key}">${value}</option>`;

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

for(let key in selectValues) { 
  mySelect.innerHTML+= `<option value = "${key}">${selectValues[key]}</option>`;
}

<select id = "mySelect">
  <option value = "0" selected = "selected">test 0</option>
</select>