Jquery Form Styler. Как удалить и заново добавить option в select?

Question

Есть простой селект, который я заполняю при загрузке страницы:

<select class="option_selector">
</select>

Заполнение:

for (var i = 0; i <= list.length - 1; i++) {
    $(".option_selector").append('<option>' + list[i] + '</option>')
}

Тут ок, но как удалить и добавить новые значения при нажатии на кнопку? Повторный код выше, но уже на событии click - работает неправильно(тут уже styler прогрузился), а $("select").styler("destroy") не срабатывает ни в коде, ни в консоли браузера.

Может кто сталкивался с таким?

Answer 1

Что-то такое хотите?

$("#add").click(()=>$(".option_selector").append('<option>' + "New Item" + '</option>'));

$("#clean").click(()=>$(".option_selector").empty());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="option_selector">
    <option disabled>Выберите героя</option>
    <option value="Чебурашка">Чебурашка</option>
    <option selected value="Крокодил Гена">Крокодил Гена</option>
    <option value="Шапокляк">Шапокляк</option>
    <option value="Крыса Лариса">Крыса Лариса</option>
</select>
<button id="add">Add</button>
<button id="clean">Clean</button>

Answer 2

Код будет записывать новые значения вместо старых по одной кнопке.

$('button').click(function(){
    let options = ''
    for (var i = 0; i <= list.length - 1; i++) {
        options += `<option>${list[i]}</option>`
    }
    $(".option_selector").html(options)
})

БЛОГ НА HUSL

Jquery Form Styler. Как удалить и заново добавить option в select?

Ответы (2 шт):