如何获取和设置 HTML 元素中 select 的值129

在本文中，我们将探索如何使用 JavaScript 获取和设置 HTML select 元素的值。select 元素用于创建下拉列表或选项列表，允许用户从可用选项中进行选择。

获取 select 值

有几种方法可以获取 select 元素的当前值：
value 属性：最简单的方法是使用 value 属性，它返回所选选项的值：

const select = ('select');
const value = ;


selectedIndex 属性：此属性返回所选选项的索引，从 0 开始：

const select = ('select');
const index = ;


selectedOptions 属性：此属性返回一个所选选项的数组，如果启用了多选：

const select = ('select');
const options = ;

设置 select 值

要设置 select 元素的值，可以使用以下方法：
value 属性：与获取值类似，您还可以使用 value 属性设置所选选项的值：

const select = ('select');
= 'new_value';


selectedIndex 属性：将 selectedIndex 属性设置为所选选项的索引：

const select = ('select');
= 2;


使用 .select() 方法：此方法可以选择一个或多个选项，并在启用了多选时特别有用：

const select = ('select');
([option1, option2]);

示例

以下是一个示例函数，演示如何获取和设置 select 元素的值：
function handleSelect(event) {
const select = ;

// 获取所选选项的值
const value = ;

// 设置所选选项的值
= 'new_value';

// 获取所选选项的索引
const index = ;
}

在本文中，我们探索了如何使用 JavaScript 获取和设置 HTML select 元素的值。通过使用 value、selectedIndex 和 selectedOptions 属性以及 .select() 方法，您可以轻松地控制 select 元素的行为。

2025-01-12

上一篇：位运算在 JavaScript 中的神奇力量

下一篇：JavaScript 子窗口