使用Select2 JS时出现双选择框的问题求助

问题现象 #

引入OREO ADMIN TEMPLATE自带的Select2 CSS和JS后，页面出现两个选择框：上方是正常工作的Select2组件，下方是模板自带的普通多选选择框，属于重复渲染问题。

相关代码如下：

表单选择框代码 #

<select class="form-control show-tick ms select2" id="countries" name="countries[]" multiple data-placeholder="Select GEO Target">
    @foreach($countries as $c)
        <option value="{{ $c->id }}">{{ $c->name }}</option>
    @endforeach
</select>

头部CSS引入 #

<!-- Select2 -->
<link rel="stylesheet" href="/assets/plugins/select2/select2.css" />

底部JS引入（已确认jQuery 3.7.1存在） #

<script src="/assets/plugins/select2/select2.min.js"></script> <!-- Select2 Js -->

Select2触发代码 #

<script>
    $(".select2").select2();
</script>

尝试将触发代码放入$(document).ready()时出现异常，因此移除了该函数。

问题根源 #

1. 模板自带的多选增强逻辑（通过show-tick、ms这类类名触发）和手动调用的Select2发生冲突，导致同一个<select>标签被两次渲染成不同的选择组件。
2. Select2初始化时机不正确，未在DOM完全加载完成后执行，或与模板内置JS的执行顺序冲突。

解决方案 #

方案1：移除模板自带的多选触发类 #

删除<select>标签中的show-tick和ms类，这些是OREO模板自带多选组件的触发标识，保留form-control和select2即可，避免模板自动渲染普通多选框：

<select class="form-control select2" id="countries" name="countries[]" multiple data-placeholder="Select GEO Target">
    @foreach($countries as $c)
        <option value="{{ $c->id }}">{{ $c->name }}</option>
    @endforeach
</select>

方案2：调整Select2初始化时机 #

将Select2的初始化代码放入$(window).on('load')中，确保页面所有资源（包括模板内置JS）加载完成后再执行，避免顺序冲突：

<script>
    $(window).on('load', function() {
        $(".select2").select2({
            placeholder: "Select GEO Target", // 显式配置占位符，和data属性保持一致
            allowClear: true // 可选：添加清空按钮，提升体验
        });
    });
</script>

如果$(document).ready()之前出问题，大概率是模板的JS也在ready阶段执行，window.load会比ready晚执行，能确保模板的渲染逻辑先完成。

方案3：检查并禁用模板的自动select渲染 #

查看模板的全局JS文件（比如oreo-admin.js之类的入口文件），确认是否存在对带特定类的<select>自动初始化的逻辑，若有，修改该逻辑，让它跳过带有select2类的元素。

方案4：兜底隐藏原选择框（不推荐优先使用） #

如果以上方案都无法解决，可以强制隐藏模板渲染的普通选择框，但这是治标不治本的方法：

<script>
    $(".select2").select2();
    // 隐藏模板生成的原多选框
    $("#countries").hide();
</script>

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