前端 Bug 记录

Bootstrap Select-Selectpicker 消失

例：Js 动态添加表格内容，下拉框消失

下拉框消失

解决办法如下：

// 示例代码
<select id="carTimeUnit" name="carTimeUnit" class="selectpicker sw" title="请选择">
    <option value="1">小时</option>
    <option value="2">分钟</option>
</select>

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

// 方法二
// 使用refresh方法更新UI以匹配新状态。
$(".sw").selectpicker('refresh');
// 使用render方法强制重新渲染引导程序 - 选择ui。
$(".sw").selectpicker('render');

Js 中拼接 Html 使用 thymeleaf 语法被解析为字符串

场景复现：在Js 拼接 html 需要使用到th:selected实现默认选中，异常展示与下图：

示例代码 解析效果

解决思路：定义一个属性接收后端内容，判断其赋值内容是否等于value，从而手动添加状态为选中：

示例代码

<!--以下为解析后的大致 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) {
                // 设置选中状态
                $(this).attr("selected", "selected");
                // 使用refresh方法更新UI以匹配新状态。
                $(".rf").selectpicker('refresh');
                // render方法强制重新渲染引导程序 - 选择ui。
                $(".rf").selectpicker('render');
                // 匹配成功结束后续循环
                return false;
            }
        });
    }
}