如何让Select2为两个类生效？仅第二个类初始化成功

我在为移动端（.select2-icons-mobile）和桌面端（.select2-icons-desktop）的两个select元素集成Select2插件时，只有桌面端的元素正常生效，移动端的完全被忽略。已尝试拆分初始化代码为两个独立调用，但问题依旧。使用的jQuery版本为v3.6.4，Select2版本为4.1.0-rc.0，相关代码如下：

JavaScript代码 #

<script>
    // Initialisiere Select2
    $('.select2-icons-mobile, .select2-icons-desktop').select2({
        templateResult: formatOption,
        templateSelection: formatSelection,
        escapeMarkup: function(m) { return m; },
        minimumResultsForSearch: Infinity
    });

    function formatOption(option) {
        if (!option.id) {
            return option.text;
        }

        var icon = getIconForOption(option);

        var $option = $('\<span\>\<i class=\"bi ' + option.text + ' mx-2\"\>\</i\>' + icon + '\</span\>');

        return $option;
    }

    function formatSelection(selection) {
        var icon = getIconForOption({ text: selection.text });

        var $selection = $('\<span\>\<i class=\"bi ' + selection.text + '\"\>\</i\>\</span\>');

        return $selection;
    }

    function getIconForOption(option) {
        if (!option.text) {
            return "";
        }

        // Prüfe den Text direkt für die mobile Auswahl
        if (option.text == "Produkt" || option.text == "bi-stack") {
            return "Produkt";
        } else if (option.text == "Generation" || option.text == "bi-x-diamond-fill") {
            return "Generation";
        } else if (option.text == "Set" || option.text == "bi-collection-fill") {
            return "Set";
        } else if (option.text == "Shop" || option.text == "bi-shop-window") {
            return "Shop";
        } else if (option.text == "Community" || option.text == "bi-people-fill") {
            return "Community";
        }

        return "";
    }
</script>

HTML代码 #

<!-- MOBILE FORM -->
<form class="d-flex" method="post" action="{{ url_for('main.search_results') }}">
    {{ search_form.hidden_tag() }}
    
    {{ search_form.search_type(class="form-control select2-icons-mobile") }}

    {{ search_form.search_string.label }}
    <div class="w-100 form-group position-relative mb-0 d-flex">
        {{ search_form.search_string(class="form-control rounded-0", placeholder="Auf PokeCheck suchen") }}
    </div>
    
    {{ search_form.submit() | safe }}
</form>

<!-- DEKSTOP FORM -->
<form class="d-flex" method="post" action="{{ url_for('main.search_results') }}">
    {{ search_form.hidden_tag() }}

    {{ search_form.search_type.label(class="form-control d-hide") }}
    {{ search_form.search_type(class="form-control select2-icons-desktop") }}

    {{ search_form.search_string.label }}
    <div class="form-group position-relative mb-0">
        {{ search_form.search_string(class="form-control desktop-form", placeholder="Auf PokeCheck suchen") }}
    </div>
    
    {{ search_form.submit() | safe }}
</form>

已尝试的拆分初始化代码 #

$('.select2-icons-mobile').select2({
    templateResult: formatOption,
    templateSelection: formatSelection,
    escapeMarkup: function(m) { return m; },
    minimumResultsForSearch: Infinity
});

$('.select2-icons-desktop').select2({
    templateResult: formatOption,
    templateSelection: formatSelection,
    escapeMarkup: function(m) { return m; },
    minimumResultsForSearch: Infinity
});

解决方法 #

1. 确保代码在DOM完全加载后执行 #

如果初始化代码执行时，移动端的select元素还未被渲染到DOM中，Select2会无法选中目标元素。将代码包裹在$(document).ready()中：

$(document).ready(function() {
    $('.select2-icons-mobile, .select2-icons-desktop').select2({
        templateResult: formatOption,
        templateSelection: formatSelection,
        escapeMarkup: function(m) { return m; },
        minimumResultsForSearch: Infinity
    });
});

2. 修复重复ID问题 #

两个表单使用了同一个search_type字段，Flask-WTF会默认给两个select生成相同的ID，而Select2对重复ID的元素处理存在异常。手动为两个select指定唯一ID：

<!-- 移动端表单 -->
{{ search_form.search_type(id="search-type-mobile", class="form-control select2-icons-mobile") }}

<!-- 桌面端表单 -->
{{ search_form.search_type(id="search-type-desktop", class="form-control select2-icons-desktop") }}

3. 处理隐藏元素的初始化冲突 #

如果移动端表单在页面加载时被CSS（如媒体查询的d-none类）隐藏，Select2可能跳过初始化。可以指定下拉框的父元素，强制初始化：

$('.select2-icons-mobile').select2({
    templateResult: formatOption,
    templateSelection: formatSelection,
    escapeMarkup: function(m) { return m; },
    minimumResultsForSearch: Infinity,
    dropdownParent: $('.select2-icons-mobile').parent()
});

4. 调试元素选择器 #

在浏览器控制台执行$('.select2-icons-mobile')，查看返回的jQuery对象长度：

• 如果长度为0：检查类名拼写是否错误，或元素是否为动态生成（动态生成的元素需要在生成后再调用Select2初始化）
• 如果长度正常：检查元素是否被其他脚本修改或移除

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