Каков наилучший способ добавить параметры для выбора в качестве объекта JS с помощью jQuery?

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

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

Я решил перезвонить немного.

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>

Поскольку 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'));

Существует проблема с сортировкой этого решения в 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));
}); 

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

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

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

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

$('#mySelect').html( $.map(selectValues, function(val, key){
    return '<option value="' + val + '">'+ key + '</option>';
}).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 & amp; jQuery посещение: http://www.codecapers.com/post/Dynamic-Select-Lists-with-MVC-and-jQuery.aspx

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

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

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

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

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

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

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

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

Используя плагин Создателя Элементов DOM (мой фаворит):

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

var output = [];

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

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

In this way you "touch the DOM" only one time.

I'm not sure if the latest line can be converted into $('#mySelect').html(output.join('')) because I don't know jQuery internals (maybe it does some parsing in the html() method)

 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

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

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

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

 var selectValues ​​= {"1": "тест 1", "2": "тест 2"}; var $ mySelect = $ ('# mySelect'); // $ .each (selectValues, function (key, value) {var $ option = $ ("", {value: key, text: value}); $ mySelect.append ($ option);}) ; 

                        
                  

                     
                     
198

                  
                  

                  

                     ответ дан                      19 December 2019 в 20:14 
                  
                  поделиться
               
                              

                  

                     

      
                                         
                  
               
            
         
         
            
         

            

               

                  

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

Сначала подключите файл templating 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");


Я писал в блоге об этом подходе более подробно. 
                  
                  

                     
                     
13

                  
                  

                  

                     ответ дан                      19 December 2019 в 20:14 
                  
                  поделиться
               
                              

                  

                     

      
                                         
                  
               
            
         
         
               

          Другие вопросы по тегам:          

         html-select javascript arrays jquery       
        
Похожие вопросы:

        

          

                          
99 
 Скрытые функции JavaScript? [закрытый] - 23 May 2017 02:10 
                            
70 
 Что такое JavaScript-версия sleep ()? - 17 March 2018 18:15 
                            
61 
 Как я могу отформатировать числа в виде строки валюты в JavaScript? - 26 May 2019 04:14 
                            
59 
 Что лучший способ состоит в том, чтобы вынудить себя к основному vi? [закрытый] - 9 April 2009 03:44 
                            
44 
 Какой синтаксис является предпочтительным для определения перечислений в JavaScript? [закрыто] - 26 December 2018 06:38 
                            
41 
 Как я могу объединить два массива в Java? - 22 December 2018 15:35 
                            
40 
 Как лучше всего обнаружить мобильное устройство? - 24 April 2019 12:27