编辑“︁HTML下拉列表”︁（章节）

= HTML下拉列表 =

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

== 基本语法 ==

HTML下拉列表使用{{code|lang=html|code=<select>}}元素创建，其中每个选项由{{code|lang=html|code=<option>}}元素定义：

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

'''输出效果：'''
{{code|lang=html|code=<select name="colors"><option value="red">红色</option><option value="green">绿色</option><option value="blue">蓝色</option></select>}}

=== 属性说明 ===
* {{code|lang=html|code=name}}：指定下拉列表的名称（表单提交时的键名）
* {{code|lang=html|code=value}}：选项的值（表单提交时发送的值）
* 显示文本：{{code|lang=html|code=<option>}}标签之间的内容

== 进阶用法 ==

=== 默认选中项 ===
使用{{code|lang=html|code=selected}}属性设置默认选中的选项：

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

=== 禁用下拉列表 ===
添加{{code|lang=html|code=disabled}}属性可禁用整个下拉列表：

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

=== 选项分组 ===
使用{{code|lang=html|code=<optgroup>}}对相关选项进行分组：

<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

== 多选下拉列表 ==
添加{{code|lang=html|code=multiple}}属性可创建允许多选的下拉列表：

<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

'''注意：'''{{code|lang=html|code=size}}属性控制可见的选项行数。

== 实际应用案例 ==

=== 用户注册表单 ===
下拉列表常用于选择国家、省份等固定选项：

<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

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

<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

== 与JavaScript交互 ==

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

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

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

== 最佳实践 ==
1. 始终为{{code|lang=html|code=<select>}}元素添加{{code|lang=html|code=name}}属性
2. 为重要表单添加默认提示选项（如"-- 请选择 --"）
3. 对大量选项使用分组（{{code|lang=html|code=<optgroup>}}）
4. 在移动设备上考虑使用原生选择控件以获得更好的用户体验

== 浏览器兼容性 ==
HTML下拉列表在所有现代浏览器中都有良好的支持，包括：
* Chrome
* Firefox
* Safari
* Edge
* Opera

== 相关概念 ==
* [[HTML表单]]
* [[HTML输入类型]]
* [[CSS样式化表单控件]]

<mermaid>
graph TD
  A[开始] --> B[创建select元素]
  B --> C[添加option元素]
  C --> D[设置默认选项]
  D --> E[添加分组optgroup]
  E --> F[结束]
</mermaid>

通过掌握HTML下拉列表，您可以创建更加用户友好和功能丰富的网页表单。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML表单]]