选择器和 selectedIndex 属性了解表单 select 的值214

javascript 中，select 元素用于创建下拉列表。它允许用户从一组选项中选择一个值。要获取或设置 select 的当前选定值，可以使用 JavaScript select 器元素的 .value 和 .selectedIndex 属性。

value 属性.value 属性返回 select 元素中选定选项的 value 属性。

代码示例：```javascript
const select = ('select');
const selectedValue = ;
```

selectedIndex 属性.selectedIndex 属性返回 select 元素中选定选项的索引。选项索引从 0 开始。

代码示例：```javascript
const select = ('select');
const selectedIndex = ;
```

设置值要设置 select 元素的选定值，可以使用 .value 或 .selectedIndex 属性。

使用 .value 属性：```javascript
const select = ('select');
= 'option2';
```

使用 .selectedIndex 属性：```javascript
const select = ('select');
= 1;
```

示例以下示例创建一个包含三个选项的下拉列表，并显示选定选项的值：
```html

Option 1
Option 2
Option 3

```
```javascript
const select = ('select');
('change', () => {
const result = ('p');
= `Selected value: ${}`;
});
```

更多技巧* 设置默认值： 在 HTML 代码中使用 selected 属性设置 select 元素的默认值。
* 禁用选项： 使用 disabled 属性禁用 select 元素中的选项。
* 添加新选项： 使用 appendChild() 方法向 select 元素中添加新选项。
* 移除选项： 使用 remove() 方法从 select 元素中移除选项。
* 获取所有选项： 使用 options 属性获取 select 元素中所有选项的数组。
通过掌握 select 值的处理，可以有效地使用 JavaScript 操纵表单下拉列表，从而提升用户体验和应用程序功能。

2024-12-27

---

上一篇：JavaScript 取字符串

下一篇：JavaScript $运算符详解