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

Question

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

каков наилучший способ добавления опций в <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) удалил тег close для опции внутри append () и (2) переместил свойства/атрибуты в карту в качестве второго параметра append ().

1223

arrays html-select javascript jquery

автор: Darryl Hein

30 ответов

автор: matdumsa · Accepted Answer · 2016-04-11 15:24:03

то же самое, что и другие ответы, в jQuery:

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

автор: gpilotino · Accepted Answer · 2017-12-27 15:34:24

var output = [];

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

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

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

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

автор: rocktheroad · Accepted Answer · 2014-03-20 11:26:56

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

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

автор: Carl Hörberg · Accepted Answer · 2018-05-13 13:23:32

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

автор: Nickolay · Accepted Answer · 2008-10-05 15:49:09

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

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

автор: m1sfit · Accepted Answer · 2011-05-02 17:53:03

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

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

автор: Animism · Accepted Answer · 2015-11-05 00:48:09

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

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

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

автор: Сухой27 · Accepted Answer · 2013-04-17 11:29:16

@joshperry

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

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

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

автор: Jack Holt · Accepted Answer · 2016-11-19 07:42:29

будьте forwarned... Я использую 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);

автор: Thorpe Obazee · Accepted Answer · 2017-07-16 05:38:45

 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

автор: Nick Josevski · Accepted Answer · 2010-07-08 05:00:35

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

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

автор: Komang · Accepted Answer · 2011-05-02 17:59:29

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

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

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

добавить он,

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

или еще лучше

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

автор: joshperry · Accepted Answer · 2010-10-01 20:22:07

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

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

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

автор: willard macay · Accepted Answer · 2017-07-17 01:02:37

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

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

автор: H Sampat · Accepted Answer · 2010-02-05 11:56:17

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

автор: Michail · Accepted Answer · 2012-09-21 09:27:00

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

автор: DiverseAndRemote.com · Accepted Answer · 2013-04-25 21:59:06

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

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

автор: Christian Roman · Accepted Answer · 2013-10-02 17:16:31

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

автор: Stuart.Sklinar · Accepted Answer · 2017-12-27 15:40:49

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

автор: Salim · Accepted Answer · 2017-12-27 15:46:54

$.each медленнее, чем for цикл
каждый раз, выбор DOM не является лучшей практикой в цикле $("#mySelect").append();

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

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

[
    {"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);

автор: Matt · Accepted Answer · 2017-12-27 15:48:42

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

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

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

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

автор: kashif · Accepted Answer · 2010-09-08 19:16:25

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

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

автор: lkahtz · Accepted Answer · 2010-12-24 16:23:44

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

автор: DW333 · Accepted Answer · 2012-11-13 20:44:40

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

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

автор: Salty · Accepted Answer · 2017-12-27 15:39:52

вот что я сделал с двумерными массивами: первый столбец-item i, add to innerHTML на <option>. Второй столбец-record_id i, добавьте в value на <option>:

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

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

автор: M_J · Accepted Answer · 2017-12-27 15:50:07

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

автор: Dr Fred · Accepted Answer · 2017-12-27 15:50:39

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

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

автор: Erick Asto Oblitas · Accepted Answer · 2015-10-08 03:06:42

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

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

автор: Lokesh thakur · Accepted Answer · 2017-10-31 06:26:54

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

автор: Satyendra Yadav · Accepted Answer · 2018-03-29 16:03:33

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