添加select-picker后，Bootstrap模态框关闭时无法清空输入框

问题 #

为@Html.DropDownListFor添加bootstrap-select（select-picker）库后，下拉菜单可正常使用，但关闭Bootstrap模态框时无法清空该下拉框，控制台未出现任何报错信息。

相关代码如下：

清空模态框输入的脚本 #

//CLEAN MODAL INPUTS
const myModalEl = document.getElementById('insertUpdateModal');
myModalEl.addEventListener('hidden.bs.modal', event => {
    $("#insertUpdateModal").find(".repair-inputs").val(null);
    $("#insertUpdateModal").find(".selectpicker").val(null);
    $("#crud_type").val(null);
});

页面引入的脚本 #

<script src="~/Scripts/jquery-3.7.0.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table-locale-all.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>
<script src="~/Content/js/repair.js"></script>
<script>
    $(document).ready(function () {
        $('.selectpicker').selectpicker();
    });
</script>

DropDownListFor代码 #

@Html.DropDownListFor(m => m.Repairs.urunID, Model.ProductsList, "Lütfen Bir Ürün Seçiniz*", new { @class = "form-control repair-inputs selectpicker", id = "repairProductInput", required = "required", data_live_search="true"})

解决方案 #

bootstrap-select是对原生<select>元素的封装，直接用.val(null)修改原生select的值后，不会自动同步到bootstrap-select生成的UI组件和内部状态，必须调用它提供的方法完成清空和刷新操作。

修改清空模态框的代码，替换原下拉框清空逻辑：

const myModalEl = document.getElementById('insertUpdateModal');
myModalEl.addEventListener('hidden.bs.modal', event => {
    $("#insertUpdateModal").find(".repair-inputs").val(null);
    // 两种方式二选一即可
    // 方式1：先设值再刷新组件，同步原生select状态到UI
    $("#insertUpdateModal").find(".selectpicker").val(null).selectpicker('refresh');
    // 方式2：直接调用取消所有选择的方法，无需手动设值
    // $("#insertUpdateModal").find(".selectpicker").selectpicker('deselectAll');
    $("#crud_type").val(null);
});

• 单选下拉框：两种方式均适用
• 多选下拉框：deselectAll会直接清空所有选中项，操作更简洁

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