始终选择Select2多选空白选项

Question

我使用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'
});

再次出现问题：第一次选择时，空白值会被选中。

给出截图。

Answer 1

我遇到了完全相同的问题。解决方法： -将Multiple属性添加到您的选择中（multiple =“ multiple”） -删除空的选项标签

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

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

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

Answer 2

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

  

对于多项选择，您不能有一个空元素

这导致了浏览器默认选择“选择”的第一个选项的问题，因此，一种变通方法是为我工作的一种变种方式

要么使用这个：

$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..."
});

第一种方法就是顺理成章的事；）希望这对某人有帮助