单击和更改不适用于jquery-select2 2选项的事件

Question

我正在使用jquery 2库来实现我的下拉列表。

在我的例子中，我希望能够在用户单击下拉列表中的选项后触发一个操作。但是，单击或更改事件似乎不起作用

haml文件：

%select.medium.name_selector.pull_left
  %option.placeholder{value:"placeholder", disabled: "disabled", selected: "selected"} Start or find a conversation with a muser
  %option{value: "nick"} nick
  %option{value: "sam"} sam
  %option{value: "john} john

coffeescript文件：

events:
  "click option" : "displayChatScreen"

displayChatScreen: (e) ->
  e.preventDefault()
  nickname = @$("select.name_selector option:selected").val()
  if nickname != "placeholder"
    Backbone.history.navigate "messages/#{nickname}",
      trigger: true
  else
    alert "You need to select a friend to chat"

一旦我更改了select2下拉框的选项，是否会触发该操作？

注意:我尝试过点击和更改事件，但它们都不起作用。

Answer 1

对于select2，您不能像对普通<select>小部件那样使用普通的<select>事件，但实际上需要将displayChatScreen方法附加到 handler provided by select2。

例如：

$('select.medium.name_selector').on('change', this.displayChatScreen);

假设这是select2小部件的选择器，并且在适当的上下文中运行。

当您使用主干提供的默认events哈希时，您实际上是在这样做：

$el.on('change', 'option', this.displayChatScreen);

由于select2实际上替换了<select> (因此用<ul> <li>对替换了<option>标记)，所以您将永远不会实际接收浏览器事件。

此外，change事件触发父<select>而不是<option>元素。

Answer 2

您可以通过不呈现选项，而是在初始化时将其作为选项传递给select2，从而共同避免此问题。

您可以这样做一个输入标签：

<input name="someName" value="selectedValues">

然后用这样的选项初始化select2：$(‘inputname=“SomeName’).select2( options )；

这样做将使您能够安全地侦听对输入的更改，就像您经常使用事件散列一样。