select2为空后不显示占位符

问题描述

在select2为空后不显示占位符。

我的select2已初始化，当我加载模态时，我必须删除值以加载新的值。但是当我这样做时，一旦加载了值，就不会显示占位符。

<select class="mySelect2" name="state" data-width="100%" data-placeholder="{% trans "New state" %}">
   <option></option>
</select>

let mySelect2 = $('select.mySelect2');

//在打开模式下...

 let options = $.map(data,(obj) => {
            return {'id': obj.uuid,'text': obj.name,'data-required-text': obj['text_required']}
   });
  mySelect2.empty();
   mySelect2.select2({
                data: options,});

我尝试了不同的方法，但是它们不起作用。它总是向我显示第一个选择。

也许我做错了什么，我该怎么办？我需要保留占位符并在更改时获取选项。

示例：https://codesandbox.io/s/morning-bird-y8h6r?file=/index.html

非常感谢您。

解决方法

调用.empty()时，您将删除所有子节点，包括空白选项。

The documentation谈到占位符：

仅对于单选，为了显示占位符值，控件中的第一个选项必须为空白。

尝试删除除第一个选项以外的所有选项：

mySelect2.find("option:not(:first-child)").remove();

javascript jquery-select2