Bootstrap/JQuery项目中Chosen插件无法正常显示问题求助

你遇到的下拉框只显示小方块的问题，核心原因是Chosen在隐藏的模态框元素上初始化时无法正确计算宽度，再加上资源加载顺序的小问题，导致组件渲染异常。下面是具体的修复方案：

1. 调整资源加载顺序 #

资源加载顺序会直接影响样式和脚本的依赖关系，正确的加载顺序应该是：

• 先加载jQuery（Chosen和Bootstrap都依赖它）
• 然后加载Bootstrap的CSS
• 接着加载Chosen的CSS
• 再加载Bootstrap的JS及相关插件
• 最后加载Chosen的JS

调整后的资源引用代码如下：

<!-- jQuery 3.3.1 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Bootstrap 3.3.7 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Chosen CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css">

<!-- Bootstrap 3.3.7 JS 及插件 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="Bootstrap_Confirmation/bootstrap-confirmation.js"></script>

<!-- Chosen JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>

2. 延迟Chosen的初始化时机 #

页面加载时你的模态框是隐藏状态，Chosen无法获取下拉框的真实宽度，所以渲染出异常的小方块。我们需要在模态框完全显示后再初始化Chosen：

修改你的JS代码为：

// 监听模态框显示完成事件，此时元素已可见
$('#permissionModal').on('shown.bs.modal', function() {
    // 初始化Chosen并设置宽度为100%，适配父容器
    $(".chzn-select").chosen({
        width: "100%"
    });
});

// 可选：如果需要重复打开模态框，监听隐藏事件销毁旧的Chosen实例，避免重复初始化
$('#permissionModal').on('hidden.bs.modal', function() {
    $(".chzn-select").chosen('destroy');
});

3. 样式兼容优化（可选） #

如果还是存在Bootstrap与Chosen的样式冲突，可以添加以下自定义CSS统一风格：

.chosen-container {
    width: 100% !important;
}
.chosen-container .chosen-single {
    border-radius: 4px;
    border: 1px solid #ccc;
    padding: 6px 12px;
    height: 34px;
    line-height: 20px;
}

按照以上步骤调整后，Chosen组件就能在模态框里正常显示和使用了。

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