Laravel 8中jQuery Select2组件运行异常的问题求助

问题现象 #

已按文档引入Select2的CSS、JS资源并编写初始化代码，但组件渲染效果不符合预期，异常效果如下：

现有实现代码 #

HTML结构 #

<div class="row">
    <div class="col-sm-12 form-group">
        <label class="form-label-bold">Jenis</label>
        <select class="select2 form-control" id="type" required>
            <option value="">Pilih</option>
            <option value="1">Head Office</option>
            <option value="2">Branch Office</option>
        </select>
    </div>
</div>

JS逻辑 #

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
    $('.select2').select2({})
})
</script>

引入的CSS资源 #

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

排查步骤与解决方案 #

按问题出现概率从高到低排查：

• 缺少jQuery依赖：Select2是基于jQuery开发的插件，必须在加载Select2的JS文件之前引入jQuery库，你贴出的代码中没有jQuery引入代码，这是最可能的故障原因。在Select2的script标签前加入jQuery引入代码即可，推荐使用3.6.0版本兼容Select2 4.1.x：

<!-- 放在select2.min.js之前引入 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

• 样式冲突：form-control是Bootstrap等框架的表单类，默认样式会和Select2自动生成的选择框容器样式冲突，导致宽度错位、边框显示异常。初始化Select2时手动指定宽度为100%即可适配栅格布局：

$('.select2').select2({
    width: '100%'
})

如果调整宽度后仍有样式问题，可以临时移除select标签上的form-control类验证是否为类名冲突，再针对性写自定义样式覆盖。

• 资源加载失败：打开浏览器开发者工具的Network面板，检查Select2的CSS、JS以及jQuery文件的加载状态，确认所有资源都返回200状态码，没有被拦截、路径错误的情况。
• 重复初始化：检查页面其他JS逻辑，确认没有多次对同一个select元素执行.select2()初始化方法，重复初始化会重复渲染DOM结构，导致下拉框错位、功能异常。

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