Який найкращий спосіб додати параметри до вибору як об’єкта JavaScript за допомогою jQuery?


1379

Який найкращий метод додавання параметрів до <select>об’єкта JavaScript за допомогою jQuery?

Я шукаю щось, що мені не потрібно для плагіна, але я також зацікавився б плагінами, які знаходяться там.

Ось що я зробив:

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

for (key in selectValues) {
  if (typeof (selectValues[key] == 'string') {
    $('#mySelect').append('<option value="' + key + '">' + selectValues[key] + '</option>');
  }
}

Чисте / просте рішення:

Це очищена та спрощена версія matdumsa :

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

Зміни від matdumsa: (1) видалили тег закриття для параметра всередині append () і (2) перемістили властивості / атрибути на карту як другий параметр append ().


4
можливо, допоможе: texotela.co.uk/code/jquery/select (мені це допомогло після того, як я натрапив на це питання)
ManBugra

2
Очищена версія, перерахована вище, працює лише у Jquery 1.4+. Для старих версій використовуйте відповідь у відповіді
matdumsa

{value: key} має бути {"value": key}, як видно з відповіді matdumsa.
Nick P

Я не вірю в це, оскільки valueце рядок (і жорстко закодований), її не потрібно цитувати.
Дарріл Хайн

1
Замість цього заголовок повинен бути "Який найкращий спосіб додати параметри до вибору з об'єкта JSON з jQuery?"
Д-р Фред

Відповіді:


1383

Те саме, що й інші відповіді у формі jQuery:

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

99
Я б, перш за все, призначив $("#mySelect")вару, інакше $("#mySelect")щоразу дзвонити всередині циклу дуже марно, як і оновлення DOM. Див. Пункти №3 та №6 на artzstudio.com/2009/04/jquery-performance-rules/…
Патрік

7
добре, ви могли просто зробити var mySelect = $("#mySelect") outside of the кожен цикл. Це було б набагато ефективніше. Дивіться відповідь Карла нижче
Патрік

17
Моя рекомендація щодо кращого стилю jQuery: $ ('# mySelect') .append ($ ("<option />") .val (key) .text (value));
FAjir

10
З популярністю цієї відповіді варто згадати, що вам слід уникати оновлень DOM в циклі. jsperf.com/jquery-append-array-vs-string
jthomas

6
ця відповідь була настільки вводить в оману через неправильне intendation ... attrі textнасправді є методи $('<option/>')-Об'єкт
phil294

268
var output = [];

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

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

Таким чином ви "торкаєтесь ДОМ" лише один раз.

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


20
Ваш метод, очевидно, швидший, ніж відповідь "правильний" вище, оскільки він також використовує менше jQuery.
Teej

4
рядок "$ ('# mySelect'). get (0) .innerHTML = output.join ('');" працює в Chrome і FF3.x , але не в IE7, наскільки я можу сказати
голуб

19
Це порушується, якщо в них keyє деякі цитати або >, <в ньому.
nickf

3
І якщо у мене є два варіанти, які я не хочу втрачати. Як я можу додати ці нові значення параметрів до існуючих?
VansFannel

6
Одне невелике вдосконалення - це об'єднання за допомогою з'єднання, а не знака плюс, як-от: output.push ('<value value = "', key, '">', value, '</option>');
ММ.

202

Це трохи швидше і чистіше.

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>


3
Ідеально. Щоб додати його, можна додати додаткові атрибути для вибору. $ .each (selectValues, function (id, value, text) {$ ('# mySelect'). append ($ ("<option />", {id: id value: value, text: text}))}} );
ідок

45
Думаю, що буде кращою ідеєю кешувати $ ('# mySelect') `, так що ви шукаєте лише один раз перед циклом. В даний час він шукає DOM для елемента для кожної окремої опції.
Сушант -

@ Sushanth-- наскільки великий це показник, якщо набір невеликий?
ckarbass

3
@ckarbass - залежить від того, наскільки великий ваш DOM. Потенційно великі і дуже маленькі зусилля, щоб призначити його змінній, значно менше, ніж писати коментар в SO!
Нік H247

97

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

4
Ніколи раніше не чув про Optionоб’єкт. Це вбудовано у всі браузери?
Дарріл Хайн

2
Я спробував використовувати new Option, але виявив, що він не працює в IE6 та 7. У мене немає причини, але багато повних параметрів jQuery працювали.
Дарріл Хайн

Хороший спосіб додати вибір. new Option('display', value, true)
boatcoder

@ Mark0978 насправді це new Option('display', value, true, true)( javascriptkit.com/jsref/select.shtml )
Карл Херберг,

38

Якщо вам не потрібно підтримувати старі версії IE, використання Optionконструктора - це зрозумілий шлях, який можна прочитати :

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

Це функціонально, але чистіше, ніж:

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

31

Це виглядає приємніше, забезпечує читабельність, але повільніше, ніж інші методи.

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

Чи це не означає, що "найшвидшим" ​​способом було б вставлення різних частин рядків як окремих елементів масиву, замість того, щоб об'єднувати складові кожного варіанту перед тим, як вставляти в масив, оскільки всі вони все-таки будуть об'єднані як одна в кінці?
Битоль

22

Уточнення відповіді старшого @ joshperry :

Здається, що звичайна. Додаток також працює, як очікувалося,

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

ви можете альтернативно використовувати $.weakmapдля дозволуGC
Chef_Code

2
Бонусні бали за елегантність: належним чином використовувати map()конструкцію в поєднанні з властивістю append()правильно додавати масив об’єктів!
Йохем Шуленклоппер

@joshperry Я якось розчарований, оскільки очікував технічної корекції / оновлення.
Сухой27

20

Усі ці відповіді здаються зайвими складними. Все, що тобі потрібно, це:

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

Це повністю сумісний браузер.


Чи має бути new Option(value, key);? Порядок параметрів - Параметри (text_visible_part, value_behind_the_scenes).
Боб Штейн

Чи Array не підтримує крос-браузер? Тоді, чи не є це зайвим, коли натискання Array є більш читабельним?
Битол

18

Будьте попереджені ... Я використовую 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);

18
 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


1
.кожен, як відомо, повільно порівняно з іншими способами досягнення того ж результату. Це те, що я думав, і рекомендував би такий підхід.
Аллен Теллез

Прикро, що 90% варіацій тут використовують $ .each (). Цикл for () може дати вам набагато більше переваг щодо контролю та продуктивності, навіть якщо він менш компактний.
HoldOffHunger

15

Існує підхід із використанням підходу 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");

Я обговорював цей підхід детальніше.


12

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

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

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

Додайте,

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

а ще краще

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

$ ('# select_id'). html (items); працював саме так, як я хотів. використовуючи додавання, він продовжує додавати елементи у всіх подіях зміни. Дуже дякую.
Dipanwita Das

10

Простий спосіб:

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

Я вже створив свій список варіантів, тому заповнити поле вибору було так само просто, як каже Віллард.
Loony2nz

10

Більшість інших відповідей використовують eachфункцію, щоб перебрати над selectValues. Це вимагає, щоб додаток додалося для кожного елемента, і поповнення спрацьовує, коли кожен додається окремо.

Оновлення цієї відповіді на більш ідіоматичний функціональний метод (з використанням сучасного JS) можна сформувати для виклику appendлише один раз, з масивом optionелементів, створених за допомогою map та Optionконструктора елементів.

Використання Optionелемента DOM повинно зменшити накладні витрати виклику функції, оскільки optionелемент не потребує оновлення після створення, і логіка розбору jQuery не повинна запускатися.

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

Це можна додатково спростити, якщо ви зробите функцію заводської утиліти, яка створить об'єкт опції:

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

10
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


8

Проблема зі сортуванням цього рішення в 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));
}); 

8

Замість того, щоб повторювати один і той же код скрізь, я б припустив, що більш бажано написати власну функцію jQuery на зразок:

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

Потім для додавання параметра просто виконайте наступне:

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

Не могли б ви детальніше?
Пн.

7

Ви можете просто повторити свій масив json за допомогою наступного коду

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


7

Хоча попередні відповіді є усіма правильними відповідями - можливо, спочатку додати все це до 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);

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

6

Ще один спосіб зробити це:

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

Я бачу, що ви тут зробили ... Ви взяли пораду кешувати, $('#mySelect')після чого відремонтували відповідь @rocktheroad ... що б там не було, це більш практичне рішення
Chef_Code

6
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 лише один раз після першого побудови гігантської струни.


ви можете оптимізувати це далі та уникнути використання jQuery взагалі, замінивши $("#myselect").empty().append(opts);наgetElementById('myselect').innerHtml = opts;
vahanpwns

6

Ось що я зробив з двовимірними масивами: Перший стовпець елемент я, додати innerHTMLз <option>. Другий стовпець record_id я, додати до 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();
        }
    }

Виглядає добре. Шкода, що не використовує jQuery. Також у мене були проблеми з методом select.options.add (). Не можу згадати, який браузер і точну проблему, але я вирішив піти з цього шляху і дозволю jQuery розібратися з відмінностями.
Дарріл Хайн

я загальний noob з PHP та JQuerry, але вищевказаний код працює у всіх браузерах. єдина проблема - це не добре працює на iPhone, я розмістив питання про це, поки що не пощастило :( stackoverflow.com/questions/11364040/…
Солоне


5

Я виявив, що це просто і чудово працює.

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

4

Формат 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
}

3

Використовуючи функцію $ .map (), ви можете зробити це більш елегантно:

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

Це дещо коротше, але одна проблема стосується втечі валь та ключових варіантів, що робить прийнята відповідь.
Дарріл Хайн

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

2

Встановіть свій ідентифікатор вибору HTML у наступному рядку нижче. Тут mySelectвикористовується як ідентифікатор елемента вибору.

   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


опишіть, будь ласка, трохи про рішення.
Vinay Prajapati

2

Власне, для отримання покращеної продуктивності краще скласти список опцій окремо та додати до вибору 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/

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.