HTML 的 ＜select＞ 元素

1. 引言

<select> 是 HTML 表单中非常常用的元素，它用于创建下拉列表，让用户从一组预定义的选项中选择一个或多个值。无论是注册表单中的省份选择、设置页面中的语言切换，还是电商网站中的商品分类筛选，<select> 都扮演着重要的角色。

本文将带你从零开始认识 <select> 元素，逐步掌握它的基础语法、常用属性、事件处理以及一些实用的进阶技巧。

2. 基础语法

一个最简单的 <select> 元素由 <select> 标签和若干个 <option> 子元素组成：

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

• <select>：定义下拉列表的容器。
• <option>：定义列表中的每一个选项。
• value 属性：选项提交给服务器的值。如果不写 value，则提交 <option> 标签内的文本内容。

3. 常用属性

3.1 name

name 属性用于标识表单字段，提交表单时，选中的选项值会以 name=value 的形式发送给服务器：

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

3.2 multiple

添加 multiple 属性后，下拉列表会变成多选列表，用户可以按住 Ctrl（Windows）或 Command（Mac）键选择多个选项：

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

3.3 size

size 属性用于设置下拉列表可见的行数。当与 multiple 一起使用时，它决定列表框中同时显示的选项数量：

<select name="fruits" multiple size="3">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>

3.4 disabled

disabled 属性可以禁用整个下拉列表，使其不可交互，提交表单时也不会包含该字段的值：

<select name="fruit" disabled>
  <option value="apple">苹果</option>
</select>

3.5 required

required 属性用于表单验证，当用户未选择任何选项时，浏览器会阻止表单提交并给出提示：

<form>
  <select name="fruit" required>
    <option value="">请选择水果</option>
    <option value="apple">苹果</option>
  </select>
  <button type="submit">提交</button>
</form>

4. option 元素的进阶用法

4.1 selected

selected 属性用于设置默认选中的选项：

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

4.2 optgroup 分组

当选项较多时，可以使用 <optgroup> 对选项进行分组，提升用户体验：

<select name="fruit">
  <optgroup label="热带水果">
    <option value="banana">香蕉</option>
    <option value="mango">芒果</option>
  </optgroup>
  <optgroup label="温带水果">
    <option value="apple">苹果</option>
    <option value="pear">梨</option>
  </optgroup>
</select>

5. 获取与设置选中值（JavaScript）

在实际开发中，我们经常需要通过 JavaScript 读取或设置 <select> 的选中值。

5.1 获取选中值

const select = document.getElementById('fruit');
const selectedValue = select.value; // 获取选中项的值
const selectedText = select.options[select.selectedIndex].text; // 获取选中项的文本

5.2 监听变化事件

select.addEventListener('change', function () {
  console.log('当前选中的值是：', this.value);
});

5.3 设置选中值

select.value = 'banana'; // 通过 value 设置选中项

6. 实战示例：联动下拉框

下面是一个经典的「选择省份后联动显示城市」的示例：

<select id="province">
  <option value="">请选择省份</option>
  <option value="guangdong">广东</option>
  <option value="zhejiang">浙江</option>
</select>

<select id="city">
  <option value="">请先选择省份</option>
</select>

<script>
  const cityData = {
    guangdong: ['广州', '深圳', '珠海'],
    zhejiang: ['杭州', '宁波', '温州']
  };

  const provinceSelect = document.getElementById('province');
  const citySelect = document.getElementById('city');

  provinceSelect.addEventListener('change', function () {
    // 清空城市下拉框
    citySelect.innerHTML = '<option value="">请选择城市</option>';

    const cities = cityData[this.value];
    if (cities) {
      cities.forEach(function (city) {
        const option = document.createElement('option');
        option.value = city;
        option.textContent = city;
        citySelect.appendChild(option);
      });
    }
  });
</script>

7. 样式美化

浏览器默认的 <select> 样式在不同平台上差异较大。我们可以通过 CSS 进行统一美化：

select {
  width: 200px;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  background-color: #fff;
  cursor: pointer;
}

select:focus {
  outline: none;
  border-color: #4a90d9;
  box-shadow: 0 0 4px rgba(74, 144, 217, 0.4);
}

8. 总结

<select> 元素虽然基础，但结合 multiple、optgroup、required 等属性以及 JavaScript 事件处理，可以构建出功能强大的表单交互。希望本文能帮助你全面掌握 <select> 的用法，在实际项目中灵活运用。