JavaScript 的 `` 元素：全面指南96

`` 元素是 HTML 中用于创建下拉列表的元素。它允许用户从预定义列表中选择一个或多个选项。在 JavaScript 中，有许多方法可以操纵和控制 `` 元素。

创建和添加选项要使用 JavaScript 创建 `` 元素，可以使用 `()` 方法。以下示例创建了一个 `` 元素并添加三个选项：
```javascript
const selectElement = ('select');
= 'my-select';
const option1 = ('option');
= '1';
= 'Option 1';
const option2 = ('option');
= '2';
= 'Option 2';
const option3 = ('option');
= '3';
= 'Option 3';
(option1);
(option2);
(option3);
(selectElement);
```

选择选项要选择 `` 元素中的选项，可以使用 `selectedIndex` 属性。该属性返回所选选项的索引，从 0 开始。以下示例选择第二个选项：
```javascript
= 1;
```
也可以使用 `selected` 属性来选择或取消选择选项。当 `selected` 属性设置为 `true` 时，该选项将被选中。以下示例选中第一个选项：
```javascript
= true;
```

获取已选选项要获取已选选项的值或文本内容，可以使用以下属性：
* `value`：返回所选选项的值。
* `textContent`：返回所选选项的文本内容。
以下示例获取已选选项的值：
```javascript
const selectedValue = ;
```

添加和删除选项要添加或删除 `` 元素中的选项，可以使用 `appendChild()` 和 `removeChild()` 方法。以下示例添加一个新选项：
```javascript
const newOption = ('option');
= '4';
= 'Option 4';
(newOption);
```
以下示例删除第一个选项：
```javascript
(option1);
```

触发事件`` 元素支持以下事件：
* `change`：当用户选择一个选项时触发。
* `focus`：当 `` 元素获得焦点时触发。
* `blur`：当 `` 元素失去焦点时触发。
以下示例在 `` 元素上添加 `change` 事件侦听器：
```javascript
('change', () => {
('Option selected: ', );
});
```

禁用和启用要禁用或启用 `` 元素，可以使用 `disabled` 属性。当 `disabled` 属性设置为 `true` 时，该元素将被禁用。以下示例禁用 `` 元素：
```javascript
= true;
```

样式`` 元素可以通过 CSS 进行样式设置。以下是一些常见的 CSS 属性：
* `background-color`：设置元素的背景颜色。
* `border`：设置元素的边框。
* `font-family`：设置元素的字体系列。
* `font-size`：设置元素的字体大小。
* `width`：设置元素的宽度。
以下示例设置 `` 元素的背景颜色和宽度：
```css
#my-select {
background-color: lightblue;
width: 200px;
}
```

2024-12-10

---

上一篇：JavaScript 在 JSP 中的应用

下一篇：JavaScript 转义