当前位置：首页 > JavaScript

js 实现下拉列表

2026-04-04 06:03:02JavaScript

使用 HTML 和 JavaScript 实现下拉列表

HTML 提供了 <select> 元素来创建下拉列表，结合 JavaScript 可以实现动态操作。

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

动态添加选项

通过 JavaScript 可以动态添加选项到下拉列表：

const dropdown = document.getElementById('myDropdown');
const newOption = document.createElement('option');
newOption.value = 'option4';
newOption.text = '选项4';
dropdown.add(newOption);

获取选中的值

获取用户选择的值：

document.getElementById('myDropdown').addEventListener('change', function() {
  const selectedValue = this.value;
  console.log('选中的值:', selectedValue);
});

使用数组动态生成选项

从数组生成下拉选项：

const fruits = ['苹果', '香蕉', '橙子'];
const fruitDropdown = document.getElementById('fruitDropdown');

fruits.forEach(fruit => {
  const option = document.createElement('option');
  option.value = fruit;
  option.text = fruit;
  fruitDropdown.add(option);
});

实现搜索功能的下拉列表

结合 <input> 和 <datalist> 实现可搜索的下拉列表：

<input list="browsers" id="browserInput" placeholder="搜索...">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>

使用第三方库实现高级下拉列表

对于更复杂的需求，可以使用第三方库如：

Select2
Choices.js
Bootstrap Select

以 Select2 为例：

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

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

响应式下拉列表实现

使用媒体查询确保下拉列表在不同设备上显示良好：

select {
  width: 100%;
  max-width: 300px;
  padding: 8px;
  font-size: 16px;
}

@media (max-width: 600px) {
  select {
    font-size: 14px;
    padding: 6px;
  }
}

无障碍访问考虑

确保下拉列表可访问：

js 实现下拉列表

<label for="accessible-dropdown">选择选项：</label>
<select id="accessible-dropdown" aria-describedby="dropdown-help">
  <option value="1">第一项</option>
  <option value="2">第二项</option>
</select>
<p id="dropdown-help">使用上下箭头键浏览选项</p>

这些方法涵盖了从基础到高级的下拉列表实现方式，可以根据具体需求选择适合的方案。