JavaScript 下拉列表：打造交互式 Web 表单347

下拉列表，也被称为下拉菜单或选择框，是 Web 表单中常见的控件，允许用户从预定义选项列表中进行选择。通过使用 JavaScript，您可以增强下拉列表的功能，提供更丰富的用户体验。

创建下拉列表

要在 HTML 中创建下拉列表，使用 <select> 元素：<select name="options">
<option value="option1">选项 1</option>
<option value="option2">选项 2</option>
</select>

使用 JavaScript 操纵下拉列表

JavaScript 提供了多种方法来操作下拉列表。例如，您可以：
使用 .add() 方法添加选项
使用 .remove() 方法删除选项
使用 .selectedIndex 属性获取选定的选项索引
使用 .addEventListener() 方法为下拉列表添加事件监听器

下面是一些示例代码：
// 添加选项
const select = ('select');
const newOption = ('option');
= 'option3';
= '选项 3';
(newOption);
// 删除选项
([1]);
// 获取选定的选项索引
const selectedIndex = ;
const selectedOption = [selectedIndex];
// 添加事件监听器
('change', (e) => {
();
});

增强下拉列表功能

您可以使用 JavaScript 增强下拉列表的功能，例如：
禁用或启用下拉列表： disabled 属性
设置默认选项： selectedIndex 属性
自动完成： autocomplete 属性
多选： multiple 属性
搜索功能：使用 datalist 元素

下面是一些示例代码：
// 禁用下拉列表
= true;
// 设置默认选项
= 1;
// 自动完成
('autocomplete', 'on');
// 多选
= true;
// 搜索功能
const datalist = ('datalist');
= 'options-list';
const options = ['选项 1', '选项 2', '选项 3'];
((option) => {
const optionElement = ('option');
= option;
(optionElement);
});
(datalist);
('list', 'options-list');