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

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

对于多选，不能有空元素

这导致浏览器默认选择“选择”的第一个选项的问题，因此作为一种解决方法，有一种对我有用的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..."
});

第一种方法是要走的路，这是显而易见的；）希望这对某人有所帮助

Answer 2

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

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

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

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