占位符在 select2 为空后不显示

Question

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

太感谢了。

Answer 1

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

文档说明了占位符：

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

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

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