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

Question

Каков наилучший способ добавления параметров в <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's:

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

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

javascript jquery html-select

1446

Darryl Hein 5 Окт 2008 в 00:58

Answer 1

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

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

1368

Justin Ethier 11 Апр 2016 в 15:24

Answer 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

Satyendra Yadav 29 Мар 2018 в 16:03

Answer 3

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

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

6

DiverseAndRemote.com 25 Апр 2013 в 21:59

Answer 4

Будьте предупреждены ... Я использую 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

Pang 19 Ноя 2016 в 07:42

Answer 5

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

6

Christian Roman 2 Окт 2013 в 17:16

Answer 6

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

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

7

kashif 8 Сен 2010 в 19:16

Answer 7

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 () метод)

266

Peter Mortensen 27 Дек 2017 в 15:34

Answer 8

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

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

5

DW333 13 Ноя 2012 в 20:44

Answer 9

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

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

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

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

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

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

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

12

Peter Mortensen 2 Май 2011 в 17:59

Answer 10

Установите свой HTML select id в следующую строку ниже. Здесь 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

2

Dulith De Costa 11 Апр 2018 в 06:22

Answer 11

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

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>

200

Akash 5 Мар 2019 в 08:01

Answer 12

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

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

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

20

Animism 5 Ноя 2015 в 00:48

Answer 13

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

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

31

Peter Mortensen 2 Май 2011 в 17:53

Answer 14

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

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

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

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

8

Peter Mortensen 27 Дек 2017 в 15:48

Answer 15

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

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

Использование элемента DOM Option должно снизить накладные расходы при вызове функции, поскольку элемент 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 элементов map и добавьте их в качестве аргументов в одном вызове с помощью 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

joshperry 22 Дек 2019 в 20:48

Answer 16

Уточнение более старого @ joshperry's answer:

Кажется, что обычный .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
);

20

Сухой27 23 Дек 2019 в 07:07

Answer 17

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

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

18

HoldOffHunger 16 Июл 2017 в 05:38

Answer 18

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

Michail 21 Сен 2012 в 09:27

Answer 19

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

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

10

HoldOffHunger 17 Июл 2017 в 01:02

Answer 20

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

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

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

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

37

Nickolay 11 Сен 2019 в 13:46

Answer 21

Существует подход, использующий подход 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");

У меня есть опубликовал в блоге этот подход более подробно.

15

Nick Josevski 8 Июл 2010 в 05:00

Answer 22

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

Peter Mortensen 27 Дек 2017 в 15:40

Answer 23

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

4

Peter Mortensen 27 Дек 2017 в 15:50

Answer 24

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

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/

2

shohan 6 Сен 2018 в 05:20

Answer 25

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

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

3

Peter Mortensen 27 Дек 2017 в 15:50

Answer 26

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

9

Rohan Ashik 19 Янв 2020 в 07:44

Answer 27

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

95

Pixelomo 13 Май 2018 в 13:23

Answer 28

$.each медленнее, чем for цикл
Каждый раз выбор 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);

7

Peter Mortensen 27 Дек 2017 в 15:46

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

28 ответов

Jquery

Ванильный JavaScript

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript