当前位置：首页 > JavaScript

js实现下拉框

2026-04-03 18:59:00JavaScript

使用HTML和JavaScript创建下拉框

HTML的<select>元素结合JavaScript可以实现交互式下拉框。以下是一个基础实现示例：

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

<script>
  document.getElementById('myDropdown').addEventListener('change', function() {
    const selectedValue = this.value;
    if(selectedValue) {
      console.log('选中的值:', selectedValue);
      // 这里可以添加选择后的处理逻辑
    }
  });
</script>

动态生成下拉选项

通过JavaScript动态添加选项：

const dropdown = document.getElementById('myDropdown');
const options = [
  { text: '北京', value: 'bj' },
  { text: '上海', value: 'sh' },
  { text: '广州', value: 'gz' }
];

options.forEach(option => {
  const element = document.createElement('option');
  element.textContent = option.text;
  element.value = option.value;
  dropdown.appendChild(element);
});

使用jQuery简化操作

如果项目中使用jQuery库，可以简化操作：

js实现下拉框

$('#myDropdown').append(
  $('<option>').val('new1').text('新增选项1'),
  $('<option>').val('new2').text('新增选项2')
);

$('#myDropdown').change(function() {
  alert('选中值: ' + $(this).val());
});

实现多级联动下拉框

典型的多级联动实现（如省市区选择）：

<select id="province">
  <option value="">选择省份</option>
</select>

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

<script>
  const data = {
    '广东省': ['广州', '深圳', '珠海'],
    '江苏省': ['南京', '苏州', '无锡']
  };

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

  // 填充省份
  Object.keys(data).forEach(province => {
    const option = new Option(province, province);
    provinceSelect.add(option);
  });

  // 省份变化时更新城市
  provinceSelect.addEventListener('change', function() {
    citySelect.innerHTML = '<option value="">选择城市</option>';
    const cities = data[this.value] || [];
    cities.forEach(city => {
      const option = new Option(city, city);
      citySelect.add(option);
    });
  });
</script>

美化下拉框样式

原生下拉框样式有限，可以使用CSS或UI库增强：

js实现下拉框

select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  font-size: 16px;
  transition: border-color 0.3s;
}

select:focus {
  border-color: #4CAF50;
  outline: none;
}

使用第三方库创建高级下拉框

对于更复杂的需求，可以考虑以下库：

Select2：提供搜索、多选等功能
Choices.js：轻量级可定制下拉框
Bootstrap Select：与Bootstrap集成的增强选择框

示例使用Select2：

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<select class="js-example-basic-single" style="width: 200px">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

<script>
$(document).ready(function() {
  $('.js-example-basic-single').select2();
});
</script>