如何在 select2 中更改占位符
How to change placeholder in select2?
如何使用 select2 更改数据占位符?
到目前为止,我已经尝试过了。
$("#city").select2({placeholder:"foo"});
而这...
$("#city").attr("data-placeholder","bar");
但两者都不起作用。
我发现如果我只是设置attr,例如 $("#city").attr('data-placeholder', 'bar')
,没有效果。但是,如果我设置 attr,然后在没有参数的情况下调用$("#city").select2()
,则占位符会更新。
例如
$("#city").attr("data-placeholder","bar");
$("#city").select2();
对于寻找属性解决方案以避免更改JS代码的其他人。我只需要自己为一个项目查找这个,似乎 select2 只需要属性 data-placeholder="。
<select id="city" data-placeholder="my placeholder"></select>
在此处查看更多信息:选择2选项参考
您也可以在模板 (html) 级别执行此操作。只需确保在第一个标签上分配一个空白(例如")字符串即可。
<select id="city" data-placeholder="Select Anything">
<option value=""></option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
或者我们可以简单地通过 JavaScript 为占位符添加一个数据属性,它应该在 select2 初始化之前发生。
$('#city').data('placeholder','This is a placeholder');
演示
一种更直接的方法..
$('#select2-' + $id + '-container').find('.select2-selection__placeholder').text('Your Text');
其中$id
是选择元素的id
更像是一个hack-y解决方案,但不涉及重新启动整个选择元素的解决方案是添加以下扩展:
$.fn.getSelect2Placeholder = function () {
var $select2Container = $(this).data('select2').$container;
return $select2Container.find('.select2-selection__placeholder').text();
};
$.fn.setSelect2Placeholder = function (placeholder) {
var $select2Container = $(this).data('select2').$container;
return $select2Container.find('.select2-selection__placeholder').text(placeholder);
};
这允许通过简单地编写以下内容来更新占位符:
$('#the-id-of-your-select2-element').setSelect2Placeholder("Your placeholder text.");
源
将其放入定位器使用的 html 中,如下所示:
<select id="city" placeholder="my placeholder"></select>
对于 select2 版本 4,我在 js init 代码中指定了占位符文本,然后使用 $select.select2{placeholder:"updated text..."}
<</p>
可以使用以下脚本:
$("#city").attr('placeholder', 'your text here' );
相关文章:
- 使用javascript的Asp.net内容占位符
- Internet Explorer缺少占位符支持,特别是密码字段
- 如何隐藏按钮单击事件上的占位符
- 需要URL模板占位符查找和替换功能的输入
- 初始化ng模型时,Angular ui选择占位符不起作用
- 如何在ie7或更高版本中设置密码字段的占位符
- 在不使用javascript的情况下,可以在表单字段中设置文本占位符(以提示最终用户插入特定格式)
- Select2-使用自定义模板时不显示占位符
- 替换字符串中的占位符值
- 为什么我应该使用HTML5(上下文:占位符)
- 在contentEditable元素中居中占位符插入符号
- 从气球弹出窗口中删除占位符
- 选择“选项”时更改输入的占位符
- 错误:ReCAPTCHA占位符元素必须为空
- 如何更改文本区域的颜色's文本,具体取决于它是否为占位符
- Select2(多选) - 如果至少已经选择一个元素,如何显示备用占位符
- 如何在 select2 中更改占位符
- 使用 select2.js 带有占位符,我无法选择第一项
- Select2 -当回调没有值时如何设置占位符
- jQuery Select2远程数据加载:显示选项而不是占位符