今日学习重点
掌握<select>元素及其相关标签，实现：

• 单选/多选下拉菜单
• 分组选项展示
• 动态数据绑定

基础结构

1. 基本单选下拉框

<select name="color">
  <option value="">--请选择--</option>
  <option value="red">红色</option>
  <option value="blue" selected>蓝色</option>
  <option value="green">绿色</option>
</select>

关键点：

• selected属性设置默认选中项
• value是提交到服务器的值
• 显示文本是<option>标签内的内容

2. 多选列表框

<select name="skills" multiple size="4">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js" selected>JavaScript</option>
</select>

属性说明：

• multiple：启用多选（按住Ctrl/Command键）
• size：同时显示的选项行数

高级用法

1. 选项分组

<select name="car">
  <optgroup label="德国车">
    <option value="bmw">宝马</option>
    <option value="benz">奔驰</option>
  </optgroup>
  <optgroup label="日本车" disabled>
    <option value="toyota">丰田</option>
  </optgroup>
</select>

特点：

• optgroup创建不可选的组标题
• 支持disabled禁用整组选项

2. 动态选择框

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

<script>
  const cities = ['北京', '上海', '广州'];
  const select = document.getElementById('city-select');
  
  cities.forEach(city => {
    const option = new Option(city, city.toLowerCase());
    select.add(option);
  });
</script>

实用技巧

1. 样式增强

select {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: white;
  appearance: none; /* 移除默认样式 */
  background-image: url('arrow-down.svg');
  background-repeat: no-repeat;
  background-position: right 10px center;
}

2. 与datalist结合

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
</datalist>

（提供输入建议，但允许用户输入其他值）

3. 响应式设计

@media (max-width: 600px) {
  select {
    width: 100%;
    font-size: 16px; /* 防止iOS缩放 */
  }
}

常见问题

1. 样式限制：下拉箭头样式浏览器间不统一选项样式难以自定义（需用div模拟）
2. 移动端差异：iOS和Android的下拉菜单行为不同需要增加点击区域大小
3. 无障碍访问：html复制下载运行<label for="fruit-select">选择水果：</label> <select id="fruit-select"> <option value="apple">苹果</option> </select>

实战案例

1. 省市区三级联动

<select id="province">
  <option>--省--</option>
</select>
<select id="city" disabled>
  <option>--市--</option>
</select>
<select id="district" disabled>
  <option>--区--</option>
</select>

<script>
  // 通过AJAX动态加载数据
</script>

2. 多选技能标签

<label>技术栈：</label>
<select name="skills" multiple class="tags-select">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>

<style>
  .tags-select option:checked {
    background: #e3f2fd;
    font-weight: bold;
  }
</style>

3. 带搜索功能的下拉

<input type="text" id="search-box" placeholder="搜索...">
<select id="large-list" size="8">
  <!-- 动态加载大量选项 -->
</select>

<script>
  document.getElementById('search-box').addEventListener('input', (e) => {
    const term = e.target.value.toLowerCase();
    const options = document.querySelectorAll('#large-list option');
    
    options.forEach(opt => {
      opt.hidden = !opt.textContent.toLowerCase().includes(term);
    });
  });
</script>

记住：<select>元素就像餐厅的菜单——选项太多会让用户困惑，太少又无法满足需求。好的下拉设计应该像招牌菜推荐，让用户快速找到想要的选择！就像程序员选咖啡——不是随便什么咖啡都能接受的。