如何让 select2 为两个类工作？它只是初始化第二个类

Question

我尝试将 Select2 与两个不同的类一起使用。这两个类用于不同的形式。其中一种适用于桌面形式，另一种适用于移动形式。问题是只有第二个类按预期工作。我想要的是使用 select2 来选择两个字段。

Jquery 版本： jQuery v3.6.4
Select2 版本：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
});

但我遇到了同样的错误。只有第二个部分在起作用，而第一个部分则不起作用。在前端，我看到 Select2 完全忽略了第一个扇区（.select2-icons-mobile）。

如何让 select2 为两个类工作？

Answer 1

一个可能的问题可能是 Select2 库可能在内部使用该类，从而导致冲突。

这里有一个建议：尝试将类名称更改为其他名称，例如，

myselect1

和

myselect2

。然后，在这些新类上初始化 Select2。具体方法如下：

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

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

在您的 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 myselect1") }}

    {{ 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>

<!-- DESKTOP 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 myselect2") }}

    {{ 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 库的任何潜在冲突。