Удаление option по условию в select
Есть тег <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();
Что исправить чтоб заработало?
Ответы (1 шт):
Автор решения: Алексей Шиманский
→ Ссылка
А зачем париться, если можно:
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>