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

How do I get select2 to work for two classes? It just initialize the second class

提问人:user22675516 提问时间:11/1/2023 最后编辑:nageenuser22675516 更新时间:11/1/2023 访问量:61

问:

我尝试将 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
});

但我遇到了同样的错误。只有第二个部门在工作,而第一个部门没有。在前端,我看到完全忽略了第一个.Select2sector( .select2-icons-mobile )

如何让 select2 为两个类工作?

javascript html jquery-select2

评论

0赞 Rory McCrossan 11/1/2023
你是说使用带有多个选择器的 jQuery 对象来初始化多个 Select2 实例对您不起作用吗?因为它应该并且确实有效:jsfiddle.net/RoryMcCrossan/oq9gw8tL。你做了什么调试?我建议首先检查控制台中是否有代码库中其他地方引发的错误。
0赞 CBroe 11/1/2023
当您的代码执行时,这两个字段实际上已经是 DOM 的一部分吗?在那个地方做一个,然后检查你得到的结果。console.log($('.select2-icons-mobile').length)
0赞 user22675516 11/1/2023
你好罗里和克布罗,奇怪的是我没有收到任何错误。调试时,控制台和服务器端日志为空。“console.log($('.select2-icons-mobile').length)”给了我输出: 1 看一下 dev.pokecheck.de/index,你会看到“.myselect1”移动表单没有用 Select2 初始化。只是桌面表单“.myselect2”。我用下面的答案更新了代码,但没有成功。

答: 暂无答案