如何用JavaScript/JQuery在HTML的select框中实现下拉子选项？

原生HTML的<select>标签不支持直接嵌套子选项，没法让单个<option>展开显示子项。要实现你要的效果，有两种常用方案：

方案1：两级联动的下拉框 #

通过两个<select>实现联动，当选择第一个下拉里的"Saab"时，第二个下拉显示对应的子选项，其他选项则隐藏第二个下拉。

代码示例： #

<!-- 主下拉框 -->
<select id="mainCars" onchange="toggleSubOptions()">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<!-- 子下拉框，默认隐藏 -->
<select id="saabSub" style="display: none;">
  <option value="saab93">Saab 9-3</option>
  <option value="saab95">Saab 9-5</option>
  <option value="saab97x">Saab 9-7X</option>
</select>

<script>
function toggleSubOptions() {
  const mainSelect = document.getElementById('mainCars');
  const subSelect = document.getElementById('saabSub');
  
  // 当选中Saab时显示子下拉，否则隐藏
  if (mainSelect.value === 'saab') {
    subSelect.style.display = 'inline-block';
  } else {
    subSelect.style.display = 'none';
  }
}
</script>

方案2：自定义层级下拉组件 #

用HTML、CSS和JS模拟一个支持层级展开的下拉菜单，视觉上更接近你要的“点击某个选项展开子项”的效果。

代码示例： #

<style>
.custom-dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-btn {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  min-width: 150px;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background: white;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  width: 100%;
}

.dropdown-menu.active {
  display: block;
}

.dropdown-item {
  padding: 8px 12px;
  cursor: pointer;
}

.dropdown-item:hover {
  background: #f0f0f0;
}

.sub-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  background: #f8f8f8;
}

.sub-menu.active {
  display: block;
}

.sub-menu .dropdown-item {
  padding-left: 24px;
}
</style>

<div class="custom-dropdown">
  <div class="dropdown-btn" id="dropdownBtn">选择车型</div>
  <ul class="dropdown-menu" id="dropdownMenu">
    <li class="dropdown-item" data-value="volvo">Volvo</li>
    <li class="dropdown-item has-submenu">
      <span>Saab</span>
      <ul class="sub-menu">
        <li class="dropdown-item" data-value="saab93">Saab 9-3</li>
        <li class="dropdown-item" data-value="saab95">Saab 9-5</li>
        <li class="dropdown-item" data-value="saab97x">Saab 9-7X</li>
      </ul>
    </li>
    <li class="dropdown-item" data-value="opel">Opel</li>
    <li class="dropdown-item" data-value="audi">Audi</li>
  </ul>
</div>

<script>
const dropdownBtn = document.getElementById('dropdownBtn');
const dropdownMenu = document.getElementById('dropdownMenu');
const hasSubmenuItems = document.querySelectorAll('.has-submenu');

// 点击主按钮切换下拉菜单显示
dropdownBtn.addEventListener('click', () => {
  dropdownMenu.classList.toggle('active');
});

// 点击带子菜单的项，切换子菜单显示
hasSubmenuItems.forEach(item => {
  item.addEventListener('click', (e) => {
    e.stopPropagation();
    const subMenu = item.querySelector('.sub-menu');
    subMenu.classList.toggle('active');
  });
});

// 点击菜单项后更新按钮文本，并关闭菜单
document.querySelectorAll('.dropdown-item').forEach(item => {
  if (!item.closest('.has-submenu')) {
    item.addEventListener('click', () => {
      dropdownBtn.textContent = item.textContent;
      dropdownMenu.classList.remove('active');
      // 这里可以获取选中的值：item.dataset.value
      console.log('选中的值：', item.dataset.value);
    });
  }
});

// 点击外部区域关闭菜单
document.addEventListener('click', (e) => {
  if (!e.target.closest('.custom-dropdown')) {
    dropdownMenu.classList.remove('active');
    document.querySelectorAll('.sub-menu').forEach(sub => sub.classList.remove('active'));
  }
});
</script>

两种方案各有优势：

• 联动下拉框实现简单，适合表单场景，兼容性好；
• 自定义组件视觉效果更灵活，能完全实现“点击父选项展开子项”的交互，但需要自己维护样式和逻辑。

内容的提问来源于stack exchange，提问作者TBC