Удаление элементов из элемента выбора по условию

Краткое описание: в этом руководстве вы узнаете, как использовать JavaScript для удаления элементов из элемента select на основе условия.

JavaScript использует класс HTMLSelectElement для представления элемента <select>. Чтобы удалить опцию из элемента select, используется метод remove() объекта HTMLSelectElement.

Предположим, что элемент <select> имеет три элемента <option> с соответствующими индексами 0, 1 и 2:

Например:

Значение Текст Индекс
A Пункт A 0
B Пункт B 1
C Пункт C 2

Когда вы вызываете метод remove() для удаления одного элемента, индекс сразу же изменится.

Например, если вы удалите второй элемент (B) с индексом 1, индекс третьего элемента (C) станет 1:

Значение Текст Индекс
A Элемент A 0
C Пункт C 1

Распространенной ошибкой является перебор вариантов элемента <select> и удаление элемента внутри цикла без учета того, что индексы были изменены.

Например, в следующем примере предпринимается попытка удалить элементы со значениями B и C. Однако удаляется только элемент B, но не C.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Demo</title> </head> <body> <label for="list">Alphabet</label> <select id="list"> <option value="A">Item A</option> <option value="B">Item B</option> <option value="C">Item C</option> </select> <script> const select = document.querySelector('#list') for (let i = 0; i < select.options.length; i++) { const value = select.options[i].value; if (value === 'B' || value === 'C') { select.remove(i); // index of C will become 1 but the value of i is 2 // therefore C will be not removed } } </script> </body> </html>
Code language: HTML, XML (xml)

Выход:

Чтобы удалить элемент C, необходимо уменьшить индекс после удаления элемента B. Следующий пример будет работать правильно:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Demo</title> </head> <body> <label for="list">Alphabet</label> <select id="list"> <option value="A">Item A</option> <option value="B">Item B</option> <option value="C">Item C</option> </select> <script> const select = document.querySelector('#list') let indices = [] for (let i = 0; i < select.options.length; i++) { const value = select.options[i].value; if (value === 'B' || value === 'C') { select.remove(i); // decrease i by one because the index has been // adjusted i-- } } </script> </body> </html>
Code language: HTML, XML (xml)

Вывод:

Практический пример

Следующий пример иллюстрирует удаление элементов из списка, текст элемента которого заканчивается строкой js.

Вот структура проекта:

├── css | └── style.css ├── js | └── app.js └── index.html

index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> <title>Demo</title> </head> <body> <main> <label for="framework">Framework:</label> <select id="framework" multiple> <option value="1">Angular</option> <option value="2">React</option> <option value="3">Vue.js</option> <option value="4">Ember.js</option> <option value="5">Svelte</option> <option value="6">Next.js</option> </select> <p>Click the Remove button to remove framework ended with js like Vue.js</p> <button class="btn">Remove</button> </main> <script src="js/app.js"></script> </body> </html>
Code language: HTML, XML (xml)

app.js

const select = document.querySelector('#framework'); const btn = document.querySelector('.btn'); btn.addEventListener('click', () => { for (let i = 0; i < select.options.length; i++) { const text = select.options[i].text; if (text.endsWith('js')) { select.remove(i); i--; } } });
Code language: JavaScript (javascript)

Вывод:

Оцените статью
devanswers.ru
Добавить комментарий