select2：以编程方式控制占位符

Question

我想在事件上更改select2增强控件上的占位符。

所以我有这个......

<select id="myFoo" placeholder="Fight some foo...">

......然后增强：

init: function(){
   $('#myFoo').select2();
},

...所以现在它有正确的占位符。

但后来我希望它对事件作出反应并清除占位符......

someButtonPress: function(){
//   $('#myFoo').placeholder("");
//   $('#myFoo').attr('placeholder', "");
//   $('#myFoo').select2('placeholder',"");
//   $('#myFoo').select2({placeholder:""});
//   none of these work
}

这看起来很基本，但我很难过。

我在文档中找不到任何内容。我在找错了地方吗？

Answer 1

更新

如果您通过HTML data-placeholder属性设置占位符，则需要更改它而不是内部选项，因此它看起来像Fabian H.建议的那样：

$select.attr("data-placeholder", "New placeholder text");
$select.data("select2").setPlaceholder();

如果没有，请使用内部选项select2.opts.placeholder：

var select2 = $select.data("select2");
select2.opts.placeholder = "New placeholder text";
select2.setPlaceholder();

这当然不是完美的，但比黑客select2生成的HTML更好。

1. this.$select.data("select2")为您提供内部select2对象，因此您可以访问其属性和方法（不仅仅是从外部导出的那些）
2. 接下来我将更新placeholder内部选项或更改相关数据属性
3. 最后，我触发了设置新占位符的内部方法setPlaceholder。

希望有所帮助！

Answer 2

如果要动态更改占位符，请不要在HTML上设置它

<select id="myFoo">

在jQuery上设置它

$('#myFoo').select2({
   placeholder: "your placeholder"
});

然后像这样更新它

someButtonPress: function(){
$('#myFoo').select2({
    placeholder: "change your placeholder"
  });
}

它对我有用，希望它有所帮助。

Answer 3

要使用远程数据（AJAX / JSONP）更新Select2的占位符，请使用以下代码：

$input = $("input#e7");
$input.attr("data-placeholder", "New placeholder");
var select2 = $input.data("select2");
select2.setPlaceholder();

积分兑换Brocks response。

Answer 4

更新占位符的另一种方法是在select元素上设置“placeholder”属性，然后再次调用select2（）：

$('#IdForSelectElement').attr('placeholder', 'New Placeholder Text').select2();

请记住，如果您第一次将任何选项传递给select2，则需要再次传递它们（或者只使用$ .fn.select2.defaults设置默认选项）。

Answer 5

我正在使用Select2 4.0.5 Standard，现有的解决方案对我来说不起作用，或者需要为每个占位符更新重新创建select2，我想避免这种情况。

我提出了一个新的解决方案，即使它是一个黑客。我存储了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');

Answer 6

我认为行为将取决于您使用的是哪个版本的Select2 - 我们使用的是v3.5.1 - 但我必须采用稍微不同的方法让占位符按需更改。在我的例子中，选择器根据另一个选择器的值更改显示的选项，这意味着占位符需要使用新数据集进行更改。

为了实现这一点，我不得不删除HTML输入元素中对占位符的任何引用。

<input type="text" class="form-control span10">

然后，在Javascript中，每当我使用正确的选项加载元素时，我必须通过data()函数更新占位符：

selector.data('placeholder', placeholder);
selector.select2({ data: new_data_set, tags: true });

这似乎每次都有效。

Answer 7

如果您还要动态修改选项，则需要为占位符的其他空选项添加队列以使其生效。例如：

response.unshift({id: '', text: ''});
$('#elem).select2({placeholder: 'Select..', data: response});