Удаление option по условию в select

Рейтинг: 0Ответов: 1Опубликовано: 26.04.2023

Есть тег <select> с вложенными <option>:

<select class="select" id="users-list" name="user">
    <option value="selected" disabled="" selected="">Select user</option>
    <option value="1">Leanne Graham</option>
    <option value="2">Ervin Howell</option>
    <option value="3">Clementine Bauch</option>
    <option value="4">Patricia Lebsack</option> 
</select>

Как обойти <select> и удалить все <option> кроме <option> с value="selected"?

Написал такую функцию:

function clearUserSelect() {
    for (let i = userSelect.options.length; i >= 1; i--) {
        userSelect.remove(i);
    }
}

В принципе все работает, но хотелось бы более универсальную функцию типа:

function clearUserSelect() {
    for (let i of userSelect) {
        if (i.value !== 'selected') {
            i.remove();
        }
    }
}

В данном случае не срабатывает строка i.remove();

Что исправить чтоб заработало?

Ответы

▲ 3Принят

А зачем париться, если можно:

document.querySelector('#users-list').innerHTML = '<option value="selected" disabled="" selected="">Select user</option>';
<select class="select" id="users-list" name="user">
        <option value="selected" disabled="" selected="">Select user</option>
        <option value="1">Leanne Graham</option>
        <option value="2">Ervin Howell</option>
        <option value="3">Clementine Bauch</option><option value="4">Patricia Lebsack</option> 
</select>

Но если очень хочется:

document.querySelectorAll('option:not([selected])').forEach(el => {
  el.remove()
})
<select class="select" id="users-list" name="user">
        <option value="selected" disabled="" selected="">Select user</option>
        <option value="1">Leanne Graham</option>
        <option value="2">Ervin Howell</option>
        <option value="3">Clementine Bauch</option><option value="4">Patricia Lebsack</option> 
</select>