h5实现下拉框

使用原生HTML5实现下拉框

HTML5原生下拉框通过<select>和<option>标签实现，适用于简单选项选择场景。

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

自定义样式下拉框

通过CSS覆盖原生样式实现视觉定制，需配合伪元素和属性选择器。

select {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: #f8f8f8;
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill="black" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 8px center;
}

动态数据绑定下拉框

使用JavaScript动态填充下拉选项，适合异步加载数据场景。

const cities = ['北京', '上海', '广州'];
const dropdown = document.getElementById('dynamicDropdown');

cities.forEach(city => {
  const option = document.createElement('option');
  option.value = city;
  option.textContent = city;
  dropdown.appendChild(option);
});

多级联动下拉框

通过事件监听实现级联选择，常见于省市联动选择场景。

document.getElementById('province').addEventListener('change', function() {
  const cityDropdown = document.getElementById('city');
  cityDropdown.innerHTML = '<option value="">请选择城市</option>';

  if(this.value === '广东') {
    const cities = ['广州', '深圳', '珠海'];
    cities.forEach(city => {
      const option = document.createElement('option');
      option.value = city;
      option.textContent = city;
      cityDropdown.appendChild(option);
    });
  }
});

搜索过滤下拉框

结合<datalist>实现输入搜索功能，提升用户体验。

<input list="searchableDropdown" placeholder="输入搜索...">
<datalist id="searchableDropdown">
  <option value="苹果">
  <option value="香蕉">
  <option value="橙子">
</datalist>

多选下拉框实现

通过multiple属性启用多选模式，需注意移动端兼容性。

<select id="multiSelect" multiple>
  <option value="1">选项A</option>
  <option value="2">选项B</option>
  <option value="3">选项C</option>
</select>

响应式下拉框设计

使用媒体查询确保不同设备上的显示效果。

@media (max-width: 768px) {
  select {
    width: 100%;
    font-size: 16px;
  }
}

下拉框验证处理

结合HTML5表单验证属性实现基本输入校验。

<select required>
  <option value="">请选择</option>
  <option value="valid">有效选项</option>
</select>

现代框架实现方案

Vue.js示例展示响应式下拉框实现。

new Vue({
  el: '#app',
  data: {
    selected: '',
    options: ['红色', '蓝色', '绿色']
  }
});

<div id="app">
  <select v-model="selected">
    <option v-for="option in options" :value="option">{{ option }}</option>
  </select>
</div>

无障碍访问优化

通过ARIA属性增强屏幕阅读器支持。

<select aria-label="颜色选择">
  <option aria-selected="false">红色</option>
  <option aria-selected="true">蓝色</option>
</select>