如何为下拉a标签链接应用Bootstrap 4的select表单样式

原生<select>元素的子节点仅支持<option>、<optgroup>两类，你预期的在<select>内嵌套<a>的结构不符合HTML规范，无法正常渲染。
最优方案是复用Bootstrap 4原生Dropdown组件，仅需少量样式调整即可实现和custom-select完全一致的视觉效果，且选项本身就是标准<a>标签，性能远优于自定义collapse实现。

实现代码 #

自定义样式（仅需3行，可放入全局样式表，不用重复写内联样式）

/* 移除Dropdown默认箭头，复用custom-select自带的下拉箭头 */
.custom-select.dropdown-toggle::after {
  display: none;
}
/* 下拉菜单和触发器宽度对齐，贴合原生select的交互体验 */
.site-select-dropdown {
  width: 100%;
}

HTML结构

<!-- 外层容器可自定义宽度，示例用w-25对应25%宽度，可替换为自定义宽度 -->
<div class="dropdown w-25">
  <button class="custom-select dropdown-toggle text-left" type="button" data-toggle="dropdown" aria-expanded="false">
    Choose a website
  </button>
  <div class="dropdown-menu site-select-dropdown">
    <a class="dropdown-item" href="https://google.com">Google</a>
    <a class="dropdown-item" href="https://apple.com">Apple</a>
    <a class="dropdown-item" href="https://amazon.com">Amazon</a>
    <a class="dropdown-item" href="https://netflix.com">Netflix</a>
  </div>
</div>

方案优势 #

• 完全复用Bootstrap原生组件逻辑，无冗余自定义代码，不会出现页面卡顿问题
• 视觉效果和原生custom-select完全匹配，符合你的样式要求
• 选项为标准<a>标签，支持右键新窗口打开、搜索引擎抓取等原生链接特性
• 自带点击外部关闭、键盘导航等交互能力，无需额外开发
• 代码结构简洁，嵌套层级少，便于维护

可选扩展功能 #

如果需要选中选项后同步修改触发器的显示文本，可添加以下JS代码：

$('.site-select-dropdown .dropdown-item').click(function() {
  $(this).parents('.dropdown').find('.dropdown-toggle').text($(this).text());
});

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