如何使用 JavaScript 选择和操作下拉列表选项75

前言

下拉列表（Select 元素）是 HTML 中常用的输入元素，可供用户从一组预定义选项中进行选择。在 JavaScript 中，我们可以通过 select 元素的 API 来操作和控制下拉列表。

获取和设置选中的选项

获取选中的选项

可以使用 selectedIndex 属性获取下拉列表中选中的选项的索引。索引从 0 开始，其中 0 表示第一个选项，-1 表示没有选项被选中。```javascript
const select = ('select');
const selectedIndex = ;
```

设置选中的选项

可以使用 selectedIndex 属性设置下拉列表中选中的选项。只需将索引值分配给 selectedIndex 属性即可。```javascript
= 2;
```

添加和删除选项

添加选项

可以使用 add 方法向下拉列表中添加一个新的选项。该方法接受一个 Option 对象作为参数。```javascript
const newOption = new Option('New Option', 'new-option');
(newOption);
```

删除选项

可以使用 remove 方法从下拉列表中删除一个选项。该方法接受选项的索引值作为参数。```javascript
(1);
```

禁用和启用选项

可以使用 disabled 属性禁用下拉列表中的选项。将属性值设置为 true 可禁用选项，设置为 false 可启用选项。```javascript
[0].disabled = true;
```

循环遍历选项

可以使用 options 属性遍历下拉列表中的所有选项。该属性返回一个 HTMLCollection 对象，包含下拉列表中的所有选项。```javascript
const options = ;
for (let i = 0; i < ; i++) {
(options[i].value);
}
```

事件处理

可以使用 change 事件来侦听下拉列表中选项被更改的事件。当选项被更改时，该事件触发。```javascript
('change', (event) => {
();
});
```

示例

以下是一个完整示例，演示如何使用 JavaScript 操作下拉列表：```javascript
const select = ('select');
// 获取选中的选项
const selectedIndex = ;
// 添加新的选项
const newOption = new Option('New Option', 'new-option');
(newOption);
// 删除选项
(1);
// 禁用选项
[0].disabled = true;
// 循环遍历选项
const options = ;
for (let i = 0; i < ; i++) {
(options[i].value);
}
// 事件处理
('change', (event) => {
();
});
```