如何使用Bootstrap 5和Bootstrap Icons在select下拉框中添加图标

你之前使用的data-icon是第三方 Bootstrap Select 插件的专属属性，Bootstrap 5 原生并不支持该属性直接渲染图标，因此直接添加在原生<select>的<option>标签上无法生效。你可以选择以下两种Bootstrap 5原生支持的方案实现需求：

方案一：使用Dropdown组件模拟下拉选择（灵活度最高） #

该方案完全还原你预期的图标显示效果，同时支持后续扩展每个选项的自定义图标，只需提前引入Bootstrap 5及Bootstrap Icons官方样式即可，实现代码如下：

<!-- 下拉触发按钮 -->
<div class="dropdown">
  <button class="btn btn-outline-secondary dropdown-toggle d-flex align-items-center gap-2" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="filterDropdown">
    <i class="bi bi-funnel-fill"></i>
    <span id="filterText">Filter</span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="filterDropdown">
    <li><button class="dropdown-item active" data-value="filter">Filter</button></li>
    <li><button class="dropdown-item" data-value="1">All</button></li>
    <li><button class="dropdown-item" data-value="2">Active</button></li>
    <li><button class="dropdown-item" data-value="3">Inactive</button></li>
  </ul>
</div>

<!-- 隐藏的原生select控件，用于表单提交时传值 -->
<select class="d-none" id="filterSelect" name="filter">
  <option value="filter" selected>Filter</option>
  <option value="1">All</option>
  <option value="2">Active</option>
  <option value="3">Inactive</option>
</select>

<!-- 配套交互逻辑 -->
<script>
const dropdownItems = document.querySelectorAll('.dropdown-item')
const filterText = document.getElementById('filterText')
const filterSelect = document.getElementById('filterSelect')

dropdownItems.forEach(item => {
  item.addEventListener('click', () => {
    // 更新按钮显示文本
    filterText.textContent = item.textContent
    // 同步隐藏select的选中值
    filterSelect.value = item.dataset.value
    // 切换选中状态样式
    dropdownItems.forEach(i => i.classList.remove('active'))
    item.classList.add('active')
  })
})
</script>

方案二：使用Input Group给原生select加前缀图标 #

如果不需要切换选项时改变图标，仅需要固定显示漏斗图标，可以用输入组组件实现，代码更简单，保留原生select的交互逻辑：

<div class="input-group">
  <span class="input-group-text">
    <i class="bi bi-funnel-fill"></i>
  </span>
  <select class="form-select" aria-label="Filter select">
    <option selected>Filter</option>
    <option value="1">All</option>
    <option value="2">Active</option>
    <option value="3">Inactive</option>
  </select>
</div>

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