根据条件从选择元素中删除项目

摘要：在本教程中，您将学习如何使用 JavaScript 根据条件从选择元素中删除项目。

JavaScript 使用 HTMLSelectElement 类来表示 <select> 元素。要从选择元素中删除选项，可以使用 HTMLSelectElement 对象的 remove() 方法。

假设 <select> 元素具有三个 <option> 元素，其对应索引为 0、1 和 2。

例如

值	文本	索引
A	项目 A	0
B	项目 B	1
C	项目 C	2

当您调用 remove() 方法删除一个元素时，索引会立即更改。

例如，如果您删除索引为 1 的第二个元素 (B)，第三个元素 (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)

输出

本教程有用吗？