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

Question

我想要更改select2上的占位符，以增强对事件的控制。

所以我有这个..。

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

然后对...which进行了增强：

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

...so现在它有了正确的占位符。

但是我想让它对事件做出反应并清除占位符...

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

这看起来很简单，但我还是被难住了。

我在文件里找不到任何东西。我找错地方了吗？

Answer 1

更新

如果你已经通过超文本标记语言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对象，因此您可以访问它的属性和方法(不仅是那些从outside)
2. Next中导出以供使用的属性和方法)我正在更新placeholder内部选项或更改相关数据我正在触发设置新占位符的内部方法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。