JavaScript 选择元素 - JavaScript 教程

摘要: 本教程将教您如何使用 JavaScript 处理<select> 元素。

HTML select 元素介绍

<select> 元素为您提供一个选项列表。<select> 元素允许您选择一个或多个选项。

要创建<select> 元素，您需要使用<select> 和<option> 元素。例如

<select id="framework">
    <option value="1">Angular</option>
    <option value="2">React</option>
    <option value="3">Vue.js</option>
    <option value="4">Ember.js</option>
</select>Code language: HTML, XML (xml)

上面的<select> 元素允许您一次选择一个选项。

要启用多个选择，您需要将multiple 属性添加到<select> 元素中，如下所示

<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>
</select>Code language: HTML, XML (xml)

HTMLSelectElement 类型

要与 JavaScript 中的<select> 元素进行交互，您需要使用HTMLSelectElement 类型。

HTMLSelectElement 类型具有以下有用的属性

selectedIndex - 返回所选选项的从零开始的索引。如果未选择任何选项，则selectedIndex 为-1。如果<select> 元素允许进行多个选择，则selectedIndex 将返回第一个选项的value。
value - 如果有一个选项被选中，则返回第一个所选选项元素的value 属性。否则，它将返回一个空字符串。
multiple - 如果<select> 元素允许进行多个选择，则返回true。它等效于multiple 属性。

selectedIndex 属性

要选择<select> 元素，您可以使用 DOM API，例如getElementById() 或querySelector()。

以下示例演示如何获取所选选项的索引

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Select Element Demo</title>
    <link href="css/selectbox.css" rel="stylesheet">
</head>
<body>
    <form>
        <label for="framework">Select a JS Framework</label>
        <select id="framework">
            <option value="1">Angular</option>
            <option value="2">React</option>
            <option value="3">Vue.js</option>
            <option value="4">Ember.js</option>
        </select>
        <button id="btn">Get the Selected Index</button>
    </form>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            // show the selected index
            alert(sb.selectedIndex);
        };
    </script>
</body>
</html>Code language: HTML, XML (xml)

工作原理

首先，使用querySelector() 方法选择<button> 和<select> 元素。
然后，将一个点击事件监听器附加到按钮，并在点击按钮时使用alert() 方法显示所选索引。

value 属性

<select> 元素的value 属性取决于<option> 元素及其 HTML multiple 属性

如果未选择任何选项，则选择框的value 属性为空字符串。
如果选择了一个选项并且该选项具有value 属性，则选择框的value 属性将是所选选项的值。
如果选择了一个选项但没有value 属性，则选择框的value 属性将是所选选项的文本。
如果选择了多个选项，则选择框的value 属性将根据前两个规则从第一个所选选项中得出。

请参见以下示例

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Selected Value</title>
    <link href="css/selectbox.css" rel="stylesheet">
</head>
<body>
    <div id="container">
        <form>
            <label for="framework">Select a JS Framework:</label>
            <select id="framework">
                <option value="">Angular</option>
                <option value="1">React</option>
                <option value="2">Vue.js</option>
                <option>Ember.js</option>
            </select>
            <button id="btn">Get the Selected Value</button>
        </form>
    </div>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            alert(sb.value);
        };
    </script>
</body>
</html>Code language: HTML, XML (xml)

在这个例子中

如果您选择第一个选项，则<select> 的value 属性为空。
如果您选择最后一个选项，则选择框的value 属性为Ember.js，因为所选选项没有value 属性。
如果您选择第二个或第三个选项，则 value 属性将为"1"或"2"。

HTMLOptionElement 类型

在 JavaScript 中，HTMLOptionElement 类型表示<option> 元素。

HTMLOptionElement 类型具有以下方便的属性

index - 选项在选项集合中的索引。
selected - 当选项被选中时返回true。您可以将此属性设置为true 以选择一个选项。
text - 返回选项的文本。
value - 返回 HTML value 属性。

<select> 元素具有options 属性，使您可以访问选项集合

selectBox.optionsCode language: CSS (css)

例如，要访问第二个选项的text 和value，您可以使用以下代码

const text = selectBox.options[1].text;
const value = selectBox.options[1].value;Code language: JavaScript (javascript)

要获取具有单一选择功能的<select> 元素的所选选项，您可以使用以下代码

let selectedOption = selectBox.options[selectBox.selectedIndex];Code language: JavaScript (javascript)

然后，您可以通过text 和value 属性访问所选选项的text 和value。

const selectedText = selectedOption.text;
const selectedValue = selectedOption.value;Code language: JavaScript (javascript)

当<select> 元素允许进行多个选择时，您可以使用selected 属性来确定哪些选项被选中

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Select Box</title>
    <link rel="stylesheet" href="css/selectbox.css">
</head>
<body>
    <div id="container">
        <form>
            <label for="framework">Select one or more JS Frameworks:</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>
            </select>
            <button id="btn">Get Selected Frameworks</button>
        </form>
    </div>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework');

        btn.onclick = (e) => {
            e.preventDefault();
            const selectedValues = [].filter
                .call(sb.options, option => option.selected)
                .map(option => option.text);
            alert(selectedValues);
        };
    </script>
</body>
</html>Code language: HTML, XML (xml)

在此示例中，sb.options 是一个类似数组的对象，因此它没有像Array 对象那样的filter() 方法。

要从Array 对象中借用这些方法，您可以使用call() 方法。例如，以下代码将返回一个包含所选选项的数组

[].filter.call(sb.options, option => option.selected)Code language: PHP (php)

要获取选项的text 属性，您可以将filter() 方法的结果与map() 方法链接起来，如下所示

.map(option => option.text);Code language: JavaScript (javascript)

总结

<select> 元素允许您选择一个或多个选项。将multiple 属性添加到<select> 元素中以启用多个选择。
HTMLSelectElement 代表<select> 元素。使用selectedIndex 和value 来获取所选选项的索引和值。
HTMLOptionElement 代表<option> 元素。如果选项被选中，则selected 属性为 true。selectedText 和selectedValue 属性返回所选选项的text 和value。

本教程是否有帮助？