<select>-下拉选择框

<select> 是 HTML 中用于创建下拉选择框的核心标签，它允许用户从预定义的选项列表中选择一个或多个值。结合 <option> 和 <optgroup> 标签，可以构建层级化、分组化的选择项，适用于表单提交、数据筛选等场景。

<select> 标签的基本结构

<select> 标签必须包含至少一个 <option> 子标签。以下是一个最简单的下拉框示例：

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

渲染效果是一个包含三个选项的下拉菜单，用户选择后提交的值为 value 属性值（如 "apple"），而显示文本为标签内的内容（如 "苹果"）。

常用属性详解

name 属性

定义表单提交时的字段名，必填属性：

<select name="fruit">
  <option value="1">苹果</option>
  <option value="2">香蕉</option>
</select>

提交数据时会以 fruit=1 或 fruit=2 的形式传递。

multiple 属性

启用多选模式，允许通过 Ctrl/Cmd 键选择多个选项：

<select multiple size="3">
  <option>红色</option>
  <option>绿色</option>
  <option>蓝色</option>
</select>

size 属性

控制可见选项行数，默认值为 1。当 size > 1 或启用 multiple 时，下拉框会呈现为滚动列表：

<select size="3">
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
</select>

disabled 属性

禁用整个下拉框：

<select disabled>
  <option>不可操作的选项</option>
</select>

form 属性

关联到指定表单的 id，允许 <select> 标签放置在表单外部：

<form id="myForm"></form>
<select form="myForm" name="color">
  <option>红色</option>
  <option>蓝色</option>
</select>

<option> 标签的扩展用法

默认选中项

通过 selected 属性设置初始选中项：

<select>
  <option>请选择</option>
  <option selected>默认选项</option>
  <option>其他选项</option>
</select>

选项分组

使用 <optgroup> 实现层级分组，label 属性定义分组名称：

<select>
  <optgroup label="水果">
    <option>苹果</option>
    <option>香蕉</option>
  </optgroup>
  <optgroup label="蔬菜" disabled>
    <option>胡萝卜</option>
    <option>西兰花</option>
  </optgroup>
</select>

动态数据绑定

结合 JavaScript 动态生成选项：

<select id="dynamic-select"></select>

<script>
  const data = [
    { id: 1, name: '选项A' },
    { id: 2, name: '选项B' }
  ];
  const select = document.getElementById('dynamic-select');
  
  data.forEach(item => {
    const option = document.createElement('option');
    option.value = item.id;
    option.textContent = item.name;
    select.appendChild(option);
  });
</script>

样式定制技巧

基础 CSS 样式

修改边框、背景色等基础样式：

select {
  padding: 8px 12px;
  border: 2px solid #3498db;
  border-radius: 4px;
  background-color: #f8f9fa;
}

自定义下拉箭头

隐藏原生箭头并添加自定义图标：

select {
  appearance: none;
  background-image: url('arrow-down.svg');
  background-position: right 10px center;
  background-repeat: no-repeat;
  padding-right: 30px;
}

响应式设计

适应不同屏幕尺寸：

select {
  width: 100%;
  max-width: 300px;
}

实际应用案例

省市联动选择器

实现二级联动效果：

<select id="province">
  <option>选择省份</option>
  <option value="1">江苏省</option>
  <option value="2">浙江省</option>
</select>

<select id="city" disabled>
  <option>选择城市</option>
</select>

<script>
  const cityData = {
    1: ['南京', '苏州', '无锡'],
    2: ['杭州', '宁波', '温州']
  };

  document.getElementById('province').addEventListener('change', function() {
    const citySelect = document.getElementById('city');
    citySelect.innerHTML = '<option>选择城市</option>';
    citySelect.disabled = !this.value;
    
    if (this.value) {
      cityData[this.value].forEach(city => {
        const option = document.createElement('option');
        option.textContent = city;
        citySelect.appendChild(option);
      });
    }
  });
</script>

搜索型选择框

结合 <datalist> 实现输入搜索：

<input list="browsers" placeholder="搜索浏览器">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
</datalist>

无障碍访问建议

1. 始终关联 <label> 标签：

   <label for="fruit-select">选择水果</label>
   <select id="fruit-select">
     <option>苹果</option>
     <option>香蕉</option>
   </select>
   

2. 为 <optgroup> 添加 aria-label：

   <optgroup label="饮料" aria-label="饮料分类">
     <option>咖啡</option>
     <option>茶</option>
   </optgroup>
   

3. 禁用状态需明确提示：

   <select disabled aria-describedby="disabled-help">
     <option>当前不可用</option>
   </select>
   <p id="disabled-help">该选项暂不可用</p>
   

与其他表单元素的组合

配合 <form> 提交数据

完整表单示例：

<form action="/submit" method="post">
  <label for="car">选择车型：</label>
  <select id="car" name="car">
    <option value="sedan">轿车</option>
    <option value="suv">SUV</option>
  </select>
  <button type="submit">提交</button>
</form>

与 <fieldset> 结合使用

分组相关控件：

<fieldset>
  <legend>用户信息</legend>
  <select name="title">
    <option>先生</option>
    <option>女士</option>
  </select>
  <input type="text" name="username">
</fieldset>