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

Question

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

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

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

Answer 1

Вы можете динамически добавлять опции в выпадающий список, как показано в примере ниже. Здесь, в этом примере, я взял данные массива и связал эти значения массива с раскрывающимся списком, как показано на снимке экрана

Выход:

var resultData=["Mumbai","Delhi","Chennai","Goa"]
$(document).ready(function(){
   var myselect = $('<select>');
     $.each(resultData, function(index, key) {
	     myselect.append( $('<option></option>').val(key).html(key) );
       });
      $('#selectCity').append(myselect.html());
});

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
</script>

<select  id="selectCity">

</select>

Answer 2

Не упоминается ни в одном ответе, но полезно, если вы хотите, чтобы этот параметр также был выбран, можно добавить:

var o = new Option("option text", "value");
o.selected=true;
$("#mySelect").append(o);

Answer 3

Это очень простые вещи. Вы можете сделать это следующим образом

$('#select_id').append('<option value="five" selected="selected">Five</option>');

или

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

Answer 4

var select = $('#myselect');
var newOptions = {
                'red' : 'Red',
                'blue' : 'Blue',
                'green' : 'Green',
                'yellow' : 'Yellow'
            };
$('option', select).remove();
$.each(newOptions, function(text, key) {
    var option = new Option(key, text);
    select.append($(option));
});

Answer 5

Есть два пути. Вы можете использовать любой из этих двух.

Во-первых:

$('#waterTransportationFrom').append('<option value="select" selected="selected">Select From Dropdown List</option>');

Второе:

$.each(dataCollecton, function(val, text) {            
    options.append($('<option></option>').val(text.route).html(text.route));
});

Answer 6

Мы обнаружили некоторую проблему, когда вы добавляете опцию и используете jquery validate. Вы должны щелкнуть один элемент в списке выбора нескольких. Вы добавите этот код для обработки:

$("#phonelist").append("<option value='"+ 'yournewvalue' +"' >"+ 'yournewvalue' +"</option>");

$("#phonelist option:selected").removeAttr("selected"); // add to remove lase selected

$('#phonelist option[value=' + 'yournewvalue' + ']').attr('selected', true); //add new selected

Answer 7

Вы можете добавить и установить атрибут Value с текстом:

$("#id").append($('<option></option>').attr("value", '').text(''));
$("#id").append($('<option></option>').attr("value", '4').text('Financial Institutions'));

Answer 8

Если вы хотите вставить новую опцию по определенному индексу в select:

$("#my_select option").eq(2).before($('<option>', {
    value: 'New Item',
    text: 'New Item'
}));

Это вставит «Новый предмет» в качестве 3-го предмета в выбор.

Answer 9

Как насчет этого

var numbers = [1, 2, 3, 4, 5];
var option = '';

for (var i=0;i<numbers.length;i++){
     option += '<option value="'+ numbers[i] + '">' + numbers[i] + '</option>';
    }

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

Answer 10

Это просто краткий балл за лучшую производительность

всегда, когда вы имеете дело со многими опциями, создайте большую строку, а затем добавьте ее в «select» для лучшей производительности

F.G.

var $ mySelect = $ ('# mySelect'); var str = '';

$.each(items, function (i, item) {
    // IMPORTANT: no selectors inside the loop (for the best performance)
    str += "<option value='" + item.value + "'> " + item.text + "</option>";
});
// you built a big string

$mySelect.html(str); // <-- here you add the big string with a lot of options into the selector.
$mySelect.multiSelect('refresh');

Еще быстрее

var str = ""; 
for(var i; i = 0; i < arr.length; i++){
    str += "<option value='" + item[i].value + "'> " + item[i].text + "</option>";
}    
$mySelect.html(str);
$mySelect.multiSelect('refresh');