JavaScript Select Option

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

HTML Select Option

一个 <select> 选项提供了选项列表。它允许我们选择一个或多个选项。我们使用 <option> 和 <select> 元素来形成一个 <select> 选项。

例如

如上所述，<select> 选项一次只允许我们选择一个选项。

如果我们希望选择多个选项，我们可以在下面将 <select> 属性添加到 <multiple> 元素中

HTMLSelectElement 类型

我们使用 HTMLSelectElement 类型来与 JavaScript 中的 <select> 选项进行交互。

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

• selectedIndex- 此属性提供一个零基的选定选项索引。当没有选择选项时，selectedIndex 将为 -1。当 <select> 选项允许多次选择时，selectedIndex 提供第一个选项的值。
• value- 如果只有一个选定的选项组件，value 属性会返回该组件的 value 属性；否则，它将返回空字符串。
• multiple- 当 <select> 组件允许多次选择时，multiple 属性返回 true。这与 multiple 属性相同。

selectedIndex 属性

我们应用 DOM API，如 querySelector() 或 getElementById()。

示例如下所示，它演示了如何获取选定的选项索引

工作原理

• 首先，使用 querySelector() 方法选择 <select> 和 <button> 组件。
• 之后，将 click 事件监听器链接到此按钮，并在按下按钮时使用 alert() 方法显示选定的索引。

value 属性

<select> 元素的 value 属性依赖于其 <option> 组件和 HTML 的 multiple 属性。

• 当没有选择任何选项时，select 框的 value 属性将为空字符串。
• 当选择了选项并且选项包含 value 属性时，select 框的 value 属性将是所选项的 value。
• 当选择了选项但选项不包含 value 属性时，select 框的 value 属性将是所选项的文本。
• 当选择了多个选项时，select 框的 value 属性将从初始选定选项派生，根据前两条规则。

考虑下面的示例

在上面的示例中

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

HTMLOptionElement 类型

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

此类型包含以下属性

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

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

Text- 返回选项的文本。

Value- 返回 HTML 的 value 属性。

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

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

然后，我们使用以下代码获取具有单个选择的 <select> 组件的选定选项

之后，我们可以通过 value 和 text 属性访问选定选项的值和文本。

当 <select> 组件允许多次选择时，我们可以使用 selected 属性来确定选择了哪个选项。

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

为了借用数组对象中的此类方法，我们使用 call() 方法，下面给出了选定选项的数组。

并且为了获取任何选项的 text 属性，我们可以将 filter() 方法的结果与 map() 方法链接在一起，如下所示。

使用 for 循环获取选定选项

我们可以使用 for 循环遍历选定列表选项，以确定选择了哪些选项。可以定义一个函数来返回对选定选项的引用或其值。下面给出了对选定选项的引用。

此函数返回一个选定的选项，适用于 select-one 类型的选择列表。对于 select-multiple 类型的选择列表，相同的函数可以返回多个选定的选项。

总结

• <select> 组件允许我们选择一个或多个选项。我们可以将 multiple 属性添加到 <select> 组件中以启用多次选择。
• HTMLOptionElement 表示 <option> 组件。如果选择了选项，则 selected 属性为 true。selected value 和 selected text 属性分别返回所选项的值和文本。
• HTMLSelectElement 表示 <select> 组件。我们可以使用 value 和 selected index 来获取所选项的值和索引。