JavaScript 列表框：全面指南95

列表框是一种常见的用户界面元素，允许用户从预定义列表中选择一个或多个值。在 JavaScript 中，可以通过 HTML <select> 元素创建列表框，该元素包含一个或多个 <option> 元素，每个元素代表列表中的一个选项。

创建 JavaScript 列表框要创建 JavaScript 列表框，请使用以下步骤：
1. 使用 HTML 创建 <select> 元素：
```html

Option 1
Option 2
Option 3

```
2. 使用 JavaScript 选择列表框元素：
```javascript
const listBox = ("my-listbox");
```

获取和设置值要获取列表框选定的值，请使用 value 属性：
```javascript
const selectedValue = ;
```
要设置列表框的选定值，请设置 value 属性：
```javascript
= "value2";
```

获取和设置选项要获取列表框的所有选项，请使用 options 属性：
```javascript
const options = ;
```
要获取特定选项，请使用 selectedIndex 属性：
```javascript
const selectedOption = options[];
```
要添加选项，请使用 add() 方法：
```javascript
(new Option("New Option", "new-value"));
```
要删除选项，请使用 remove() 方法：
```javascript
(selectedOption);
```

事件处理可以为列表框添加事件侦听器，以响应用户操作：
onchange：在选项发生更改时触发
```javascript
("change", () => {
("Option changed to", );
});
```
onfocus：当列表框获得焦点时触发
```javascript
("focus", () => {
("List box focused");
});
```
onblur：当列表框失去焦点时触发
```javascript
("blur", () => {
("List box blurred");
});
```

禁用和启用可以通过设置 disabled 属性来禁用列表框：
```javascript
= true;
```
可以通过设置 disabled 属性为 false 来启用列表框：
```javascript
= false;
```

其他属性* multiple：如果设置为 true，则允许用户选择多个选项。
* size：指定列表框中同时可见的选项数量。
* name：列表框的名称，用于表单提交。
* tabindex：指定列表框在制表顺序中的位置。

JavaScript 列表框是一组强大的工具，用于收集和显示用户输入。通过利用它们提供的属性、方法和事件，您可以创建交互式和用户友好的应用程序。

2025-02-05

上一篇：嵌入式 JavaScript：将代码无缝集成到网页中的强大方法

下一篇：JavaScript 权威指南中文版概览