Как добавить option в select через jquery?

Пользователь

krista

от krista , в категории: JavaScript , 2 года назад

2 | 0

jquery option

2 ответа

Пользователь

dmitrypro77

от dmitrypro77 , 2 года назад

@krista Чтобы добавить option в select лист через jQuery можно использовать .append() метод, ниже пример кода добавления нового автомобиля в список через append() метод:

<html>
<head>
    <meta charset="utf-8"/>
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</head>
<body>
    <label for="cars">Выберите автомобиль:</label>

    <select id="cars">
        <option value="bmw">BMW</option>
        <option value="audi">Audi</option>
        <option value="ford">Ford</option>
    </select>
    <button class="add-more">Добавить Жигули:</button>
</body>
<script>
    $(".add-more").on("click", function () {
        $("#cars").append($('<option/>', {
            value: "lada",
            text : "Жигули"
        }));
    })
</script>
</html>

1 | 0

Всегда открыт для интересных проектов. Ссылки на мои соц. сети в профиле.

Пользователь

gussie.jones

от gussie.jones , год назад

@krista

Вы можете использовать функцию append для добавления option в select через jQuery. Например, чтобы добавить опцию со значением "value" и текстом "text" в элемент select с ID "mySelect", вы можете использовать следующий код:

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

Вы так же можете создать новый элемент option с помощью конструктора $() и добавить его в select с помощью функции append.

var option = $('<option>', {
    value: 'value',
    text: 'text'
});
$('#mySelect').append(option);

Если нужно добавить несколько option, то можно использовать функцию append с циклом.

var options = [
    { value: 'value1', text: 'text1' },
    { value: 'value2', text: 'text2' },
    { value: 'value3', text: 'text3' }
];
$.each(options, function(i, option) {
    $('#mySelect').append($('<option>', option));
});

0 | 0

Как добавить option в select через jquery?

2 ответа

Похожие обсуждения: