当前位置：首页 > JavaScript

用js实现下拉菜单

2026-04-04 09:51:56JavaScript

使用HTML和CSS创建基本结构

下拉菜单的基础是HTML结构。创建一个<select>元素，内部嵌套多个<option>元素作为选项：

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

通过JavaScript增强交互

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

用js实现下拉菜单

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

自定义样式下拉菜单

如果需要更复杂样式，可以用<div>模拟下拉行为：

用js实现下拉菜单

<div class="custom-dropdown">
  <button class="dropdown-toggle">选择选项</button>
  <ul class="dropdown-menu">
    <li data-value="option1">选项1</li>
    <li data-value="option2">选项2</li>
    <li data-value="option3">选项3</li>
  </ul>
</div>

.custom-dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-menu {
  display: none;
  position: absolute;
  list-style: none;
  padding: 0;
  margin: 0;
}
.dropdown-menu li {
  padding: 8px 12px;
  cursor: pointer;
}

const toggle = document.querySelector('.dropdown-toggle');
const menu = document.querySelector('.dropdown-menu');

toggle.addEventListener('click', () => {
  menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
});

document.querySelectorAll('.dropdown-menu li').forEach(item => {
  item.addEventListener('click', () => {
    toggle.textContent = item.textContent;
    menu.style.display = 'none';
    console.log('选中的值:', item.dataset.value);
  });
});

使用第三方库实现

对于更复杂需求，可以考虑使用Select2等库：

<select class="js-example-basic-single">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

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

无障碍访问考虑

确保下拉菜单可通过键盘操作：

toggle.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
  }
});

每个实现方式适用于不同场景，简单需求使用原生<select>即可，需要高度定制时推荐自定义实现或使用成熟库。