如何在span标签中添加两个类？Bootstrap5与bootstrap-select使用问题

• JS文件加载顺序错误：Bootstrap-select依赖jQuery，且Bootstrap 5的相关依赖需要在jQuery加载完成后再引入，当前加载顺序是先加载bootstrap.bundle.min.js、再加载jQuery，会导致组件初始化异常。
• data-content属性内的HTML语法不规范：class属性没有加双引号，组件解析时会丢失后面的类名。
• bootstrap-select默认开启了HTML内容清理（sanitize）机制，会自动过滤掉默认白名单以外的类名，导致bg-danger、bg-warning等Bootstrap 5类被移除。
• 若使用的bootstrap-select版本低于v1.14.0，本身不兼容Bootstrap 5，也会出现样式类丢失的问题。

1. 调整JS文件加载顺序，优先加载jQuery，再加载Bootstrap JS，最后加载bootstrap-select JS
2. 给data-content里的HTML属性加上转义后的双引号
3. 给selectpicker添加data-sanitize="false"属性关闭内容清理，或者将用到的样式类加入白名单
4. 若版本过低，更新bootstrap-select到v1.14.0及以上的适配Bootstrap 5的版本

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/css/bootstrap-select.min.css">
    <title>Hello, world!</title>
</head>
<body>
<div class="container mt-5">
    <div class="col-md-6 mx-auto">
        <label for="color_id">Colors</label>
        <select class="form-control selectpicker" id="color_id" name="color_id[]" data-live-search="true" data-sanitize="false">
            <option value="1" data-content="<span class=&quot;badge bg-danger&quot;>Red</span>">
                Red
            </option>
            <option value="2" data-content="<span class=&quot;badge bg-warning&quot;>Warning</span>">
                Warning
            </option>
        </select>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>
</body>
</html>

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