h5实现下拉框

实现基础下拉框

使用HTML5的<select>和<option>标签创建基础下拉框：

<select id="basicDropdown">
  <option value="">请选择</option>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

添加分组选项

通过<optgroup>标签对选项进行分组：

<select id="groupedDropdown">
  <optgroup label="分组1">
    <option value="g1-1">分组1-选项1</option>
    <option value="g1-2">分组1-选项2</option>
  </optgroup>
  <optgroup label="分组2">
    <option value="g2-1">分组2-选项1</option>
    <option value="g2-2">分组2-选项2</option>
  </optgroup>
</select>

自定义样式下拉框

使用CSS美化原生下拉框：

select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 16px;
  width: 200px;
}

select:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}

使用datalist实现自动完成

HTML5的<datalist>提供输入建议功能：

<input list="browsers" placeholder="输入或选择浏览器">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>

动态加载选项

通过JavaScript动态添加选项：

const dynamicSelect = document.getElementById('dynamicDropdown');
const options = ['动态选项1', '动态选项2', '动态选项3'];

options.forEach((text, index) => {
  const option = document.createElement('option');
  option.value = `dynamic${index + 1}`;
  option.textContent = text;
  dynamicSelect.appendChild(option);
});

响应选择事件

监听下拉框的选择变化：

document.getElementById('basicDropdown').addEventListener('change', function() {
  console.log('选中值:', this.value);
  console.log('显示文本:', this.options[this.selectedIndex].text);
});

多选下拉框

添加multiple属性实现多选：

<select id="multiSelect" multiple size="4">
  <option value="m1">多选项目1</option>
  <option value="m2">多选项目2</option>
  <option value="m3">多选项目3</option>
  <option value="m4">多选项目4</option>
</select>

获取多选值需要使用特殊方法：

document.getElementById('multiSelect').addEventListener('change', function() {
  const selected = [...this.selectedOptions].map(opt => opt.value);
  console.log('已选项:', selected);
});

禁用选项

通过disabled属性禁用特定选项：

<select id="disabledDropdown">
  <option value="">请选择</option>
  <option value="active1">可用选项1</option>
  <option value="active2">可用选项2</option>
  <option value="disabled" disabled>禁用选项</option>
</select>

响应式设计

使下拉框适应不同屏幕尺寸：

@media (max-width: 600px) {
  select {
    width: 100%;
    max-width: 300px;
  }
}