HTML下拉列表[编辑 | 编辑源代码]

HTML下拉列表（也称为选择框或下拉菜单）是一种常见的表单元素，允许用户从预定义的选项列表中选择一个或多个值。它在网页表单中广泛用于节省空间并提供清晰的选项选择方式。

基本语法[编辑 | 编辑源代码]

HTML下拉列表使用

<select>

元素创建，其中每个选项由

<option>

元素定义：

<select name="colors">
  <option value="red">红色</option>
  <option value="green">绿色</option>
  <option value="blue">蓝色</option>
</select>

输出效果：

<select name="colors"><option value="red">红色</option><option value="green">绿色</option><option value="blue">蓝色</option></select>

属性说明[编辑 | 编辑源代码]

```
name
```
：指定下拉列表的名称（表单提交时的键名）
```
value
```
：选项的值（表单提交时发送的值）
显示文本：
```
<option>
```
标签之间的内容

进阶用法[编辑 | 编辑源代码]

默认选中项[编辑 | 编辑源代码]

使用

selected

属性设置默认选中的选项：

<select name="fruit">
  <option value="apple">苹果</option>
  <option value="banana" selected>香蕉</option>
  <option value="orange">橙子</option>
</select>

禁用下拉列表[编辑 | 编辑源代码]

添加

disabled

属性可禁用整个下拉列表：

<select name="country" disabled>
  <option value="us">美国</option>
  <option value="uk">英国</option>
</select>

选项分组[编辑 | 编辑源代码]

使用

<optgroup>

对相关选项进行分组：

<select name="car">
  <optgroup label="德国车">
    <option value="bmw">宝马</option>
    <option value="audi">奥迪</option>
  </optgroup>
  <optgroup label="日本车">
    <option value="toyota">丰田</option>
    <option value="honda">本田</option>
  </optgroup>
</select>

多选下拉列表[编辑 | 编辑源代码]

添加

multiple

属性可创建允许多选的下拉列表：

<select name="languages" multiple size="4">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="python">Python</option>
</select>

注意：

size

属性控制可见的选项行数。

实际应用案例[编辑 | 编辑源代码]

用户注册表单[编辑 | 编辑源代码]

下拉列表常用于选择国家、省份等固定选项：

<form>
  <label for="country">国家：</label>
  <select id="country" name="country">
    <option value="">-- 请选择 --</option>
    <option value="cn">中国</option>
    <option value="us">美国</option>
    <option value="jp">日本</option>
  </select>
</form>

产品筛选[编辑 | 编辑源代码]

电子商务网站常用下拉列表实现产品筛选：

<select name="price_range">
  <option value="0-100">¥0-100</option>
  <option value="100-500">¥100-500</option>
  <option value="500-1000">¥500-1000</option>
</select>

与JavaScript交互[编辑 | 编辑源代码]

可以通过JavaScript动态操作下拉列表：

// 获取选中的值
const selectedValue = document.querySelector('select[name="colors"]').value;

// 动态添加选项
const select = document.querySelector('select[name="colors"]');
const newOption = new Option("黄色", "yellow");
select.add(newOption);

最佳实践[编辑 | 编辑源代码]

1. 始终为

<select>

元素添加

name

属性

2. 为重要表单添加默认提示选项（如"-- 请选择 --"）

3. 对大量选项使用分组（

<optgroup>

）

4. 在移动设备上考虑使用原生选择控件以获得更好的用户体验

浏览器兼容性[编辑 | 编辑源代码]

HTML下拉列表在所有现代浏览器中都有良好的支持，包括：

Chrome
Firefox
Safari
Edge
Opera