如何为带选择功能的国家列表下拉框应用Bootstrap下拉样式？

我在HTML里用了Bootstrap模板自带的导航栏，其中的下拉菜单样式我很喜欢，导航栏代码片段如下：

<nav id="navbar" class="navbar">
  <ul>
    <li class="dropdown"><a href="#"><span>Drop Down</span> <i class="bi bi-chevron-down"></i></a>
    </li>
         
</nav>

现在我做了一个国家列表的原生下拉框，代码如下：

<select id="innerSelect">
  <option id="firstOption" value="0">Country List</option>
</select>

想知道怎么把这个国家列表下拉框改成和Bootstrap导航栏下拉菜单一样的样式。

原生<select>没法直接套用Bootstrap导航栏的dropdown样式，毕竟两者的DOM结构和样式逻辑不一样。我们可以改用Bootstrap的Dropdown组件来模拟原生select的选择功能，同时复用导航栏下拉菜单的样式，具体操作如下：

1. 替换DOM结构，改用Bootstrap Dropdown布局 #

把原生select换成Bootstrap dropdown的标准结构，贴合你原有导航栏的写法，直接放在navbar的ul里就行：

<nav id="navbar" class="navbar">
  <ul>
    <!-- 原有导航栏下拉菜单 -->
    <li class="dropdown"><a href="#"><span>Drop Down</span> <i class="bi bi-chevron-down"></i></a></li>
    <!-- 改造后的国家列表下拉框 -->
    <li class="dropdown">
      <a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        <span>Country List</span> <i class="bi bi-chevron-down"></i>
      </a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" data-value="0" href="#">Country List</a></li>
        <li><a class="dropdown-item" data-value="1" href="#">China</a></li>
        <li><a class="dropdown-item" data-value="2" href="#">United States</a></li>
        <li><a class="dropdown-item" data-value="3" href="#">Japan</a></li>
        <!-- 可以继续添加更多国家选项 -->
      </ul>
    </li>
  </ul>
</nav>

2. 加JS逻辑，模拟select的选择效果 #

Bootstrap的Dropdown默认只是展示下拉列表，得自己加JS实现选择后更新按钮文本、存储选中值的功能：

// 获取下拉触发器和所有选项
const dropdownToggle = document.querySelector('.dropdown-toggle');
const dropdownItems = document.querySelectorAll('.dropdown-item');

dropdownItems.forEach(item => {
  item.addEventListener('click', function(e) {
    e.preventDefault();
    // 更新触发器上显示的文本
    dropdownToggle.querySelector('span').textContent = this.textContent;
    // 把选中的值存入隐藏input，方便表单提交时用
    const hiddenInput = document.getElementById('countryValue');
    if (hiddenInput) {
      hiddenInput.value = this.getAttribute('data-value');
    }
  });
});

如果需要提交表单时传递选中的国家值，记得在页面里加个隐藏input：

<input type="hidden" id="countryValue" name="country" value="0">

3. 确认Bootstrap资源加载完整 #

要保证页面已经加载了Bootstrap的CSS、JS，还有Bootstrap Icons（因为用到了下拉箭头图标）：

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<!-- Bootstrap JS（包含Popper，Dropdown需要它） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

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