当前位置：首页 > JavaScript

js中的下拉列表实现

2026-01-30 16:49:12JavaScript

使用HTML `<select>` 元素实现基础下拉列表

通过HTML原生<select>标签创建下拉列表，结合<option>定义选项：

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

通过JavaScript动态生成下拉选项

使用DOM操作动态添加选项到现有<select>元素：

js中的下拉列表实现

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

options.forEach((city, index) => {
  const option = document.createElement('option');
  option.value = `city_${index}`;
  option.textContent = city;
  dropdown.appendChild(option);
});

获取选中值并处理事件

监听change事件获取用户选择的值：

js中的下拉列表实现

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

使用第三方库增强功能（如Select2）

通过引入Select2库实现搜索、多选等高级功能：

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<select class="enhanced-dropdown" multiple>
  <option value="1">红色</option>
  <option value="2">蓝色</option>
</select>

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<script>
$(document).ready(function() {
  $('.enhanced-dropdown').select2();
});
</script>

实现级联下拉菜单

通过AJAX或本地数据实现级联选择：

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

const regionData = {
  '江苏省': ['南京', '苏州'],
  '浙江省': ['杭州', '宁波']
};

provinceSelect.addEventListener('change', function() {
  citySelect.innerHTML = '<option value="">选择城市</option>';
  const cities = regionData[this.value] || [];

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