JavaScript 中当前选择的选项
Kushank Singh
2023年1月30日
2021年10月2日
-
使用
HTMLSelectElement.options
从使用 JavaScript 的选择列表中获取当前选项 -
使用
HTMLSelectElement.selectedOptions
从使用 JavaScript 的选择列表中获取当前选项
我们可以在网页中使用不同类型的表单,其中每个字段都属于某种类型。有时,我们必须从下拉列表中选择一个选项。<select>
元素用于创建下拉列表。<select>
标签内的 <option>
标签用于定义下拉列表中的选项。
本教程将介绍如何使用 JavaScript 获取 <select>
元素中当前选定的选项。
使用 HTMLSelectElement.options
从使用 JavaScript 的选择列表中获取当前选项
HTMLSelectElement.options
属性返回 <select>
元素中存在的 <option>
元素的 HtmlOptionsCollections
。
我们可以创建一个函数来显示列表中所选选项的值。
参考下面的代码
HTML 代码:
<select id="cars" onchange="select()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
JavaScript 代码:
var selection = document.getElementById("cars");
function select() {
alert(selection.options[selection.selectedIndex].value);
}
selectedIndex
返回所选选项的索引。
使用 HTMLSelectElement.selectedOptions
从使用 JavaScript 的选择列表中获取当前选项
这个 HTMLSelectElement.selectedOptions
包含在 <select>
元素中定义的所有 <option>
元素的列表,这些元素被选中。
参考下面的代码。
HTML 代码:
<select id="cars" onchange="select()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
JavaScript 代码:
var selection = document.getElementById("cars");
function select() {
alert(selection.selectedOptions[0].value);
}
此方法通常不适用于 Internet Explorer。