如何实现带图标的Bootstrap Select下拉选择框（附示例）

你之前的写法无效是因为原生HTML的<select>标签仅允许<option>或<optgroup>作为直接子元素，不能直接在里面嵌套<img>标签，浏览器会自动忽略这些无效的嵌套元素。

下面提供两种可行的实现方式：

方式一：纯CSS实现（原生select增强） #

通过自定义属性+CSS伪元素来为选项添加图标，适合不需要复杂交互的场景，注意部分浏览器对<option>伪元素的支持有限：

<!DOCTYPE html>
<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
    <style>
        /* 给select添加自定义类，用于定位图标 */
        .icon-select option {
            padding-left: 35px;
            position: relative;
        }
        /* 通过伪元素显示图标 */
        .icon-select option::before {
            content: '';
            position: absolute;
            left: 8px;
            top: 50%;
            transform: translateY(-50%);
            width: 22px;
            height: 22px;
            background-size: cover;
            background-repeat: no-repeat;
        }
        /* 为每个选项绑定对应图标 */
        .icon-select option[data-icon="form"]::before {
            background-image: url('https://img.icons8.com/offices/30/null/form.png');
        }
        .icon-select option[data-icon="num1"]::before {
            background-image: url('https://img.icons8.com/offices/30/null/number-1.png');
        }
        .icon-select option[data-icon="num2"]::before {
            background-image: url('https://img.icons8.com/offices/30/null/number-2.png');
        }
        .icon-select option[data-icon="num3"]::before {
            background-image: url('https://img.icons8.com/offices/30/null/number-3.png');
        }
    </style>
</head>
<body>
<div class="input-group mb-3">
  <select class="form-select icon-select" id="inputGroupSelect03" aria-label="Example select with button addon">
    <option selected data-icon="form">Choose...</option>
    <option value="1" data-icon="num1">One</option>
    <option value="2" data-icon="num2">Two</option>
    <option value="3" data-icon="num3">Three</option>
  </select>
</div>
</body>
</html>

方式二：使用Bootstrap Select插件（推荐） #

Bootstrap Select是专门为Bootstrap打造的下拉框增强插件，完美支持图标显示，且兼容性更好：

1. 引入插件的CSS和JS文件（你已有的jQuery、Bootstrap资源保留）
2. 给<option>添加data-icon属性指定图标地址
3. 初始化插件

<!DOCTYPE html>
<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <!-- 引入Bootstrap Select样式文件 -->
    <link rel="stylesheet" href="bootstrap-select.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
    <!-- 引入Bootstrap Select脚本文件 -->
    <script src="bootstrap-select.min.js"></script>
</head>
<body>
<div class="input-group mb-3">
  <select class="form-select" id="inputGroupSelect03" aria-label="Example select with button addon">
    <option selected data-icon="https://img.icons8.com/offices/30/null/form.png">Choose...</option>
    <option value="1" data-icon="https://img.icons8.com/offices/30/null/number-1.png">One</option>
    <option value="2" data-icon="https://img.icons8.com/offices/30/null/number-2.png">Two</option>
    <option value="3" data-icon="https://img.icons8.com/offices/30/null/number-3.png">Three</option>
  </select>
</div>
<script>
    // 页面加载完成后初始化插件
    $(document).ready(function(){
        $('#inputGroupSelect03').selectpicker();
    });
</script>
</body>
</html>

这个插件还支持更多自定义功能，比如搜索、分组等，完全适配Bootstrap的设计风格。

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