Добавление параметров в <select>с помощью jQuery?

Question

Какой самый простой способ добавить option в выпадающий список с помощью jQuery?

Будет ли это работать?

$("#mySelect").append('<option value=1>My option</option>');

Answer 1

Если кто-то приходит сюда в поисках способа добавления параметров со свойствами данных

Использование attr

var option = $('<option>', { value: 'the_value', text: 'some text' }).attr('family', model.family);

Использование данных - добавлена ​​версия 1.2.3

var option = $('<option>', { value: 'the_value', text: 'some text' }).data('misc', 'misc-value);

Answer 2

На основании ответа дуле для добавления коллекции предметов, однострочный for...in также будет творить чудеса:

let cities = {'ny':'New York','ld':'London','db':'Dubai','pk':'Beijing','tk':'Tokyo','nd':'New Delhi'};

for(let c in cities){$('#selectCity').append($('<option>',{value: c,text: cities[c]}))}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<select  id="selectCity"></select>

Значения объекта и индексы присваиваются опциям. Это решение работает даже в старом jQuery (v1.4) !

Answer 3

Вы можете сделать это в ES6:

$.each(json, (i, val) => {
    $('.js-country-of-birth').append(`<option value="${val.country_code}"> ${val.country} </option>`);
  });

Answer 4

$(function () {
     var option = $("<option></option>");
     option.text("Display text");
     option.val("1");
     $("#Select1").append(option);
});

Если вы получаете данные от какого-либо объекта, просто перенаправьте этот объект в функцию ...

$(function (product) {
     var option = $("<option></option>");
     option.text(product.Name);
     option.val(product.Id);
     $("#Select1").append(option);
});

Name и Id - это имена свойств объекта ... так что вы можете вызывать их как угодно ... И конечно, если у вас есть Array ... вы хотите создать пользовательскую функцию с помощью цикла for ..., а затем просто вызвать эта функция в документе готова ... ура

Answer 5

Это то, как я это сделал, с кнопкой для добавления каждого тега выбора.

$(document).on("click","#button",function() {
   $('#id_table_AddTransactions').append('<option></option>')
}

Answer 6

если у вас есть optgroup внутри выберите , вы получили ошибку в DOM.

Я думаю, что лучший способ:

$("#select option:last").after($('<option value="1">my option</option>'));

Answer 7

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

  <select id="mySelect"></select>

    <script>
          $("#mySelect").append($("<option></option>").val("1").html("My enter code hereoption"));
    </script>

Answer 8

$('#select_id').append($('<option>',{ value: v, text: t }));