javascript - 占位符在 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()
您将删除所有子节点,包括空白选项。
文档说明了占位符:
仅对于单选,为了显示占位符值,您必须将空白作为控件中的第一个选项。
尝试删除除第一个选项之外的所有选项:
mySelect2.find("option:not(:first-child)").remove();
推荐阅读
- android - Android模拟器无法启动
- python - 无法获取元素的文本。我想在这里使用动态xpath来获取标题元素的文本
- python - 检查两个轮廓是否相互接触
- javascript - 如何在 JQuery 中的两个字符串之间连接变量
- java - 如何最有效地将列表内容复制到另一个列表
- python - 如何在 Python 中反转列表切片?在每一步我们反转列表的间隔并输出整个列表
- typescript - 将 CoreUI 图标导入 Vue.js TypeScript 项目
- mysql - Debezium 时间戳问题,无法转换为本地时区
- c# - 如何在 MVC 上使用 C# 在 iTextSharo 中显示 Unicode 字符
- python - 如何在 Python 子进程中模拟按键?