提问人:user22675516 提问时间:11/1/2023 最后编辑:nageenuser22675516 更新时间:11/1/2023 访问量:61
如何让 select2 为两个类工作?它只是初始化第二个类
How do I get select2 to work for two classes? It just initialize the second class
问:
我尝试将 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
sector( .select2-icons-mobile )
如何让 select2 为两个类工作?
答: 暂无答案
评论
console.log($('.select2-icons-mobile').length)