Select2 多选空白选项始终选中

Posted 2023-05-07

【中文标题】Select2 多选空白选项始终选中

【英文标题】：Select2 multi select blank option always selected

【发布时间】：2018-10-01 06:32:34

【问题描述】：

我使用 select2 进行多选，当我第一次选择时，任何选项，空白选项中的空值总是被选中。 如果我在加载时不使用占位符第一个选项，则会出现另一个问题。

这是我的 html 代码（包括一些 php）：

<select class="form-control select2-multiple" name="category_id">
        <option></option>
        @foreach($instrument_category as $key=>$value)
            <option value=" $value "> $value </option>
        @endforeach
</select>

这是我的 jquery：

$(".select2-multiple").select2(
    'placeholder' : "Select Category",
    'multiple' : true,
    'defaultView': 'dropdown'
);

还有一个问题：第一次选择时会选择空白值。

给出的截图。

【问题讨论】：

在 select2 Docs 中说：“对于多选，您必须 not 有一个空的 元素：”

如果我删除空选项，它会选择第一个选项，并且不会显示占位符。

【参考方案1】：

我遇到了完全相同的问题。要解决它： - 将多个属性添加到您的选择中（multiple="multiple"） - 删除空选项标签

就我而言，我动态创建下拉菜单。所以我写了这段代码来修复它。

            $('#' + selectorId).attr('multiple', 'multiple');
            $("#" + selectorId + " option")[0].remove();

            $("#" + selectorId).select2(
                multiple: true,
                width: '100%',
                placeholder: "-- Select --"
            );

【参考方案2】：

正如 Select2 文档 https://select2.org/placeholders 中所述：

对于多选，你不能有一个空元素

这导致浏览器默认选择“select”的第一个选项的问题，因此作为一种解决方法，有一种对我有用的hacky方式

要么使用这个：

$your_select_element.select2(
    multiple: true,
    placeholder: "Select whatever..."
);
// set the value to null or empty string '', then trigger (change) event
$your_select_element.val(null).trigger("change");

或者这个：

// the initial call of select2
$your_select_element.select2(
    multiple: true,
    placeholder: "Select whatever..."
);
$your_select_element.val(null);
$('.select2.select2-container').remove();
//re-call select2 on your element 
$your_select_element.select2(
    multiple: true,
    placeholder: "Select whatever..."
);

不费吹灰之力，第一种方法就是要走的路；）希望这对某人有所帮助