Bootstrap Select-Selectpicker 消失

例：Js 動態(tài)添加表格內容，下拉框消失

下拉框消失

解決辦法如下：

// 示例代碼
<select id="carTimeUnit" name="carTimeUnit" class="selectpicker sw" title="請選擇">
    <option value="1">小時</option>
    <option value="2">分鐘</option>
</select>

// 方法一
// 添加時設置下拉框高度
$(".sw").selectpicker({
    "width": 100
})

// 方法二
// 使用refresh方法更新UI以匹配新狀態(tài)。
$(".sw").selectpicker('refresh');
// 使用render方法強制重新渲染引導程序 - 選擇ui。
$(".sw").selectpicker('render');

Js 中拼接 Html 使用 thymeleaf 語法被解析為字符串

場景復現(xiàn)：在Js 拼接 html 需要使用到th:selected實現(xiàn)默認選中，異常展示與下圖：

示例代碼

解析效果

解決思路：定義一個屬性接收后端內容，判斷其賦值內容是否等于value，從而手動添加狀態(tài)為選中：

示例代碼

<!--以下為解析后的大致 HTML-->
<div id="tbody1">
    <div style="display:flex;align-items:center;margin-top: 5px;">
        <select id="carTimeUnit1" name="carTimeUnit" class="selectpicker sw rf" title="請選擇">
            <option value="1" select="1">小時</option>
            <option value="2" select="1">分鐘</option>
        </select>
    </div>
    <div style="display:flex;align-items:center;margin-top: 5px;">
        <select id="carTimeUnit2" name="carTimeUnit" class="selectpicker sw rf" title="請選擇">
            <option value="1" select="2">小時</option>
            <option value="2" select="2">分鐘</option>
        </select>
    </div>
</div>

// 設置默認選中 jQuery
function refreshSelect() {
    const len = $('#tbody1').children('div').length;// 拿到所有div
    for (let i = 0; i < len; i++) {
        const row = $('#tbody1').children('div').eq(i); // 取到每一個div
        row.find(".rf option").each(function () {  //遍歷所有option
            const value = $(this).val();   //獲取option值
            const select = $(this).attr("select"); // 獲取自定義屬性的值
            if (value === select) {
                // 設置選中狀態(tài)
                $(this).attr("selected", "selected");
                // 使用refresh方法更新UI以匹配新狀態(tài)。
                $(".rf").selectpicker('refresh');
                // render方法強制重新渲染引導程序 - 選擇ui。
                $(".rf").selectpicker('render');
                // 匹配成功結束后續(xù)循環(huán)
                return false;
            }
        });
    }
}