jQuery select2：以编程方式控制占位符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16902240/
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
select2: programmatically controlling placeholder
提问by DaveC426913
I want to change the placeholder on a select2 enhancing control upon an event.
我想在事件上更改 select2 增强控件上的占位符。
So I've got this...
所以我有这个...
<select id="myFoo" placeholder="Fight some foo...">
...which is then enhanced:
...然后得到增强：
init: function(){
$('#myFoo').select2();
},
...so now it has its correct placeholder.
...所以现在它有正确的占位符。
But then I want it to react to an event and clear the placeholder...
但是后来我希望它对事件做出反应并清除占位符...
someButtonPress: function(){
// $('#myFoo').placeholder("");
// $('#myFoo').attr('placeholder', "");
// $('#myFoo').select2('placeholder',"");
// $('#myFoo').select2({placeholder:""});
// none of these work
}
This seems so basic, yet I'm stumped.
这看起来很基本，但我很难过。
I can't find anything in the docs. Am I looking in the wrong place?
我在文档中找不到任何内容。我找错地方了吗？
回答by Brock
Update
更新
If you've set placeholder via HTML data-placeholderattribute, you need to change it and not the internal option, so it will look as Fabian H.suggests:
如果您已通过 HTMLdata-placeholder属性设置占位符，则需要更改它而不是内部选项，因此它看起来像Fabian H.建议的那样：
$select.attr("data-placeholder", "New placeholder text");
$select.data("select2").setPlaceholder();
Or if not, use an internal option select2.opts.placeholder:
或者，如果没有，请使用内部选项select2.opts.placeholder：
var select2 = $select.data("select2");
select2.opts.placeholder = "New placeholder text";
select2.setPlaceholder();
This is not perfect of course, but way better than hacking select2 generated HTML.
这当然并不完美，但比破解 select2 生成的 HTML 好得多。
this.$select.data("select2")gets you the internal select2 object, so you get access to its properties and methods (not only to those exported for use from outside)- Next I'm updating the
placeholderinternal option or changing the related data attribute - Finally I'm triggering internal method
setPlaceholderthat sets the new placeholer.
this.$select.data("select2")为您提供内部 select2 对象，因此您可以访问其属性和方法（不仅是那些从外部导出以供使用的属性和方法）- 接下来我要更新
placeholder内部选项或更改相关数据属性 - 最后，我触发
setPlaceholder了设置新占位符的内部方法。
Hope that helps!
希望有帮助！
回答by Ruchi Karnawan
if you want to dynamically change the placeholder, don't set it on HTML
如果要动态更改占位符，请不要在 HTML 上设置
<select id="myFoo">
set it on jQuery
在 jQuery 上设置它
$('#myFoo').select2({
placeholder: "your placeholder"
});
then update it like this
然后像这样更新它
someButtonPress: function(){
$('#myFoo').select2({
placeholder: "change your placeholder"
});
}
it works for me, hope it helps.
它对我有用，希望它有所帮助。
回答by Fabian Horlacher
To update the placeholder of a Select2 with remote data (AJAX/JSONP) use this code:
要使用远程数据 (AJAX/JSONP) 更新 Select2 的占位符，请使用以下代码：
$input = $("input#e7");
$input.attr("data-placeholder", "New placeholder");
var select2 = $input.data("select2");
select2.setPlaceholder();
Credits to Brocks response.
学分Brocks响应。
回答by Noah Heldman
Another way to update the placeholder is to set the "placeholder" attribute on the select element, and call select2() again:
另一种更新占位符的方法是在 select 元素上设置“placeholder”属性，并再次调用 select2()：
$('#IdForSelectElement').attr('placeholder', 'New Placeholder Text').select2();
Just remember that if you passed any options to select2 the first time, you will need to pass them in again (or just set up default options using $.fn.select2.defaults).
请记住，如果您第一次将任何选项传递给 select2，您将需要再次传递它们（或者只是使用 $.fn.select2.defaults 设置默认选项）。
回答by Gavin.Paolucci.Kleinow
I'm using Select2 4.0.5 Standard and the existing solutions either didn't work for me or required recreating the select2 for every placeholder update, which I wanted to avoid.
我正在使用 Select2 4.0.5 Standard，现有的解决方案要么对我不起作用，要么需要为每个占位符更新重新创建 select2，这是我想避免的。
I came up a new solution, even if it is a hack. I store the select2 container to easily access it later, then when I need to update the placeholder I find the placeholder element within the container and update its text:
我想出了一个新的解决方案，即使它是一个黑客。我存储 select2 容器以便以后轻松访问它，然后当我需要更新占位符时，我会在容器中找到占位符元素并更新其文本：
var selectorSelect2 = $('#selector').data('select2').$container;
...
selectorSelect2.find('.select2-selection__placeholder').text('Updated Text 1');
...
selectorSelect2.find('.select2-selection__placeholder').text('Updated Text 2');
回答by Ghazi
If you are also modifying options dynamically, you'll need to en-queue an additional empty option for the placeholder to take effect. For example:
如果您还动态修改选项，则需要将额外的空选项加入队列以使占位符生效。例如：
response.unshift({id: '', text: ''});
$('#elem).select2({placeholder: 'Select..', data: response});
回答by Chip Roberson
I believe the behavior is going to depend on which version of Select2 you are using – we are using v3.5.1 – but I had to take a slightly different approach to get the placeholder to change on demand. In my case, the selector changes options presented based on the value of another selector, which means the placeholder needs to change with the new data set.
我相信行为将取决于您使用的是哪个版本的 Select2——我们使用的是 v3.5.1——但我不得不采取稍微不同的方法来让占位符按需更改。就我而言，选择器会根据另一个选择器的值更改显示的选项，这意味着占位符需要随新数据集而更改。
To get this to work, I had to remove any references to a placeholder in the HTML input element.
为了让它起作用，我必须删除对 HTML 输入元素中占位符的任何引用。
<input type="text" class="form-control span10">
Then, in the Javascript, whenever I loaded the element with the correct options, I had to update the placeholder via the data()function:
然后，在 Javascript 中，每当我使用正确的选项加载元素时，我都必须通过data()函数更新占位符：
selector.data('placeholder', placeholder);
selector.select2({ data: new_data_set, tags: true });
That seems to work every time now.
这似乎每次都有效。
