JavaScript 选择选项

我们将在本教程中了解如何在JavaScript中管理<select>选项。

HTML选择选项

<select>选项帮助我们创建选项列表。它允许我们选择单个或多个选项。我们使用<option>和<select>元素来创建<select>选项。

例如：

<select id="color">
<option value="1">Red</option>
<option value="2">Yellow</option>
<option value="3">Green</option>
<option value="4">Blue</option>
</select>

选项允许我们一次选择一个在上面提到的选项。

如果我们希望选择多个选项，我们可以在下面的元素中包含属性：

<select id="color" multiple>
<option value="1">Red</option>
<option value="2">Yellow</option>
<option value="3">Green</option>
<option value="4">Blue</option>
</select>

HTMLSelectElement 类型

我们在JavaScript中使用 HTMLSelectElement 类型来与选项进行交互。

HTMLSelectElement 类型包含以下有用的属性：

JavaScript 选择选项

selectedIndex- 该属性返回选中选项的从零开始的索引。当没有选中选项时，selectedIndex 的值为 -1。当元素允许多个选项时，selectedIndex 返回第一个选项的值。
value- value 属性返回最初选中选项的值，如果只有一个选项被选中。否则，返回空字符串。
multiple- multiple 属性返回 true，表示元素允许多个选项被选择。与 multiple 属性相同。

selectedIndex 属性

我们可以使用 DOM API，如 querySelector() 或 getElementById()。

下面的示例展示了如何获取选中选项的索引：

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Select Option Demo</title>
<link href="css/selectbox.css" rel="style sheet">
</head>
<body>
<form>
<label for="color">Select a Color</label>
<select id="color">
<option value="1">Red</option>
<option value="2">Yellow</option>
<option value="3">Green</option>
<option value="4">Blue</option>
</select>
<button id="btn">Get a Selected Index</button>
</from>
<script>
const btn = document.querySelector('#btn');
const sb = document.querySelector('#color');
btn.onclick = (event) =>
{
event.preventDefault();
alert(sb.selectedIndex);
};
</script>
</body>
</html>

如何工作：

首先，使用querySelector()方法选择<select>和<button>组件。
然后，将点击事件监听器链接到该按钮，并在按钮被按下时使用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="style sheet">
</head>
<body>
<div id="container">
<form>
<label for="color">Select a Color</label>
<select id="color">
<option value="1">Red</option>
<option value="2">Yellow</option>
<option value="3">Green</option>
<option value="4">Blue</option>
</select>
<button id="btn">Get a Selected Value</button>
</from>
</div>
<script>
const btn = document.querySelector('#btn');
const sb = document.querySelector('#color');
btn.onclick = (event) =>
{
event.preventDefault();
alert(sb.value);
};
</script>
</body>
</html>

在上面的示例中：

当我们选择初始选项时，<select>元素的 value 属性是空的。
当我们选择最后一个选项时，选择框的 value 属性会变为 “Ember.js”，因为选择的选项没有 value 属性。
当我们选择第三个或第二个选项时，value 属性会变为 “1” 或 “2”。

HTMLOptionElement 类型

HTMLOptionElement 类型代表 JavaScript 中的 <option>元素。

该类型包含以下属性：

JavaScript 选择选项

索引- 选项在选项组中的索引。

选择- 如果选择了该选项，则返回true。我们将selected属性设置为true以选择一个选项。

文本- 返回选项的文本。

值- 返回HTML的value属性。

<select>组件包含一个option属性，允许我们访问选项集合：

selectBox.options

例如，要访问第二个选项的值和文本，我们使用以下代码：

const text = selectBox.options[1].text;
const value = selectBox.options[1].value;

获取<select>组件的选定选项以及单个选项，我们使用以下代码：

let selectOption = selectBox.options [selectBox.selectedIndex];

之后，我们可以通过值和文本属性访问所选选项的值和文本：

const selectedText = selectedOption.text;
const selectedValue = selectedOption.value;

当<select>组件允许多个选项时，我们可以使用selected属性来确定哪个选项被选中：

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Selected Box</title>
<link href="css/selectbox.css" rel="style sheet">
</head>
<body>
<div id="container">
<form>
<label for="color">Select one or more Colors:</label>
<select id="color" multiple>
<option value="1">Red</option>
<option value="2">Yellow</option>
<option value="3">Green</option>
<option value="4">Blue</option>
</select>
<button id="btn">Get a Selected Colors</button>
</form>
</div>
<script>
const btn = document.querySelector('#btn');
const sb = document.querySelector('#color');
btn.onclick = (e) =>
{
e.preventDefault();
const selectValues = [].filter.call(sb.options, option => option.selected).map (option => option.text);
alert(selectedValues);
};
</script>
</body>
</html>

在示例中， sb.option 是类似数组的对象。因此，它不包含与Array对象相同的filter()方法。

为了通过数组对象借用这些类型的方法，我们使用call()方法，下面是所选选项的数组：

[].filter.call(sb.options, option => option.selected)

获取任何选项的文本属性，可以将filter()方法的结果与map()方法链接在一起，如下所示：

.map(option => option.text);

通过for循环获取选中的选项

我们可以使用for循环来遍历选中的选项列表，确定哪个被选择。可以定义一个函数来返回对选定选项的引用或值。以下代码返回对选定选项的引用：

function getSelectedOption(sel)
{
var opt;
for (var i= 0, len= sel.options.length; i

该函数用于选择列表的单选选项，适用于select-one类型的列表。该函数对于select-multiple类型的列表可以选择多个选项。

总结

组件允许我们选择一个或多个选项。我们可以给组件添加multiple属性以启用多选功能。
HTMLOptionElement表示组件。如果选择了一个选项，selected属性值为true。selected value和selected text属性返回所选选项的值和文本。
HTMLSelectElement表示组件。我们可以使用value和selected index属性来获取所选选项的值和索引。