当前位置：首页 > JavaScript

js中的下拉列表实现的

2026-04-04 08:38:41JavaScript

使用HTML `<select>` 标签创建基础下拉列表

HTML原生提供<select>标签，配合<option>标签可实现基础下拉列表：

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

通过JavaScript动态填充下拉列表

使用DOM操作动态添加选项：

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

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

获取选中值的方法

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

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

使用第三方库增强功能

对于需要搜索、多选等高级功能，可选用：

js中的下拉列表实现的

Select2
Choices.js
Bootstrap Select

以Select2为例：

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.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>

实现多选下拉列表

HTML5新增multiple属性实现多选：

js中的下拉列表实现的

<select id="multiSelect" multiple>
  <option value="red">红色</option>
  <option value="green">绿色</option>
  <option value="blue">蓝色</option>
</select>

获取多个选中值：

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

禁用选项和选项分组

通过disabled属性禁用特定选项，optgroup实现分组：

<select>
  <optgroup label="水果">
    <option value="apple">苹果</option>
    <option value="banana" disabled>香蕉(缺货)</option>
  </optgroup>
  <optgroup label="蔬菜">
    <option value="carrot">胡萝卜</option>
  </optgroup>
</select>

响应式下拉列表实现

结合CSS实现响应式设计：

select {
  width: 100%;
  max-width: 300px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
}

@media (max-width: 600px) {
  select {
    font-size: 16px; /* 移动端增大字号 */
  }
}