当前位置：首页 > JavaScript

js 实现下拉列表

2026-01-30 14:23:10JavaScript

使用HTML和JavaScript创建下拉列表

通过HTML的<select>元素结合JavaScript可以动态创建和操作下拉列表。

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

// 获取下拉列表元素
const dropdown = document.getElementById('myDropdown');

// 添加选项
const newOption = document.createElement('option');
newOption.value = 'option3';
newOption.text = '选项3';
dropdown.add(newOption);

// 监听变化事件
dropdown.addEventListener('change', function() {
  console.log('选中值:', this.value);
});

动态生成下拉列表选项

通过JavaScript数组动态生成选项更高效。

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

fruits.forEach(fruit => {
  const option = document.createElement('option');
  option.value = fruit.toLowerCase();
  option.textContent = fruit;
  fruitDropdown.appendChild(option);
});

document.body.appendChild(fruitDropdown);

使用jQuery简化操作

如果项目中已引入jQuery库，操作更简洁。

$('#container').append(`
  <select id="jqueryDropdown">
    <option value="red">红色</option>
    <option value="blue">蓝色</option>
  </select>
`);

$('#jqueryDropdown').change(function() {
  alert($(this).val());
});

实现搜索型下拉列表

结合<datalist>元素实现带搜索功能的下拉框。

<input list="browsers" placeholder="输入或选择">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
</datalist>

响应式下拉菜单实现

通过CSS和JavaScript实现响应式设计。

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
}

document.querySelector('.dropdown-btn').addEventListener('click', function() {
  document.querySelector('.dropdown-content').style.display = 'block';
});

js 实现下拉列表