jQuery 如何更改select2中的占位符？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19062933/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change placeholder in select2?
提问by Bill
How do I change the data placeholder with select2?
如何使用 select2 更改数据占位符？
So far I've tried this.
到目前为止，我已经尝试过这个。
$("#city").select2({placeholder:"foo"});
And this...
和这个...
$("#city").attr("data-placeholder","bar");
But neither works.
但两者都不起作用。
回答by Bill
I found that if I just set the attr e.g. $("#city").attr('data-placeholder', 'bar'), there is no effect. However, if I set the attr and then call $("#city").select2()with no arguments, then the placeholder updates.
我发现如果我只是设置了 attr eg $("#city").attr('data-placeholder', 'bar')，则没有任何效果。但是，如果我设置 attr 然后$("#city").select2()不带参数调用，则占位符会更新。
e.g.
例如
$("#city").attr("data-placeholder","bar");
$("#city").select2();
回答by Lars Koudal
For other people looking for an attribute solution to avoid changing JS code. I just had to look this up myself for a project, and it seems select2 just needs the attribute data-placeholder="".
对于其他正在寻找属性解决方案以避免更改 JS 代码的人。我只需要自己查找一个项目，似乎 select2 只需要属性 data-placeholder=""。
<select id="city" data-placeholder="my placeholder"></select>
See more here: select2 options reference
在此处查看更多信息：select2 选项参考
回答by wdonayredroid
You can also do it like this in the template (html) level. Just be sure to assign a blank (e.g. "") string on your first tag.
您也可以在模板 (html) 级别这样做。请务必在您的第一个标签上分配一个空白（例如“”）字符串。
<select id="city" data-placeholder="Select Anything">
<option value=""></option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
or we can simply add a data attribute for placeholder via javascript and it should happen before select2 gets initialized.
或者我们可以简单地通过javascript为占位符添加一个数据属性，它应该在select2初始化之前发生。
$('#city').data('placeholder','This is a placeholder');
回答by Ken Kin
A more direct way ..
更直接的方法..
$('#select2-' + $id + '-container').find('.select2-selection__placeholder').text('Your Text');
where $idis the idof the select element
其中$id是id选择元件的
回答by dearsina
A bit more of a hack-y solution, but one that doesn't involve re-initiating the entire select element is to add the following extensions:
更多的hack-y解决方案，但不涉及重新启动整个select元素的解决方案是添加以下扩展：
$.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);
};
This allows for updating the placeholder by simply writing:
这允许通过简单地编写来更新占位符：
$('#the-id-of-your-select2-element').setSelect2Placeholder("Your placeholder text.");
回答by Evan
Put it in the html that your locator uses like this:
把它放在你的定位器使用的 html 中，如下所示：
<select id="city" placeholder="my placeholder"></select>
回答by Samih A
For select2 version 4 I specified the placeholder text in js init code and then update it using $select.select2{placeholder:"updated text..."}
对于 select2 版本 4，我在 js init 代码中指定了占位符文本，然后使用 $select.select2{placeholder:"updated text..."}
