单击并更改事件对 jquery-select2 选项不起作用

Question

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

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

哈姆尔文件：

%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

咖啡脚本文件：

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>小部件那样使用正常的change事件，但实际上您需要将displayChatScreen方法附加到 select2 提供的change处理程序。

例如

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

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

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

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

由于 select2 实际上替换了<select>（因此<option>标签替换为<ul> <li>对），因此您实际上永远不会收到浏览器事件。

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

Answer 2

您可以通过不呈现选项并在初始化时将其作为选项传递给 select2 来避免此问题。

您可以像这样制作输入标签：

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

然后使用如下选项初始化 select2： $（'input[name="SomeName"]'）.select2（options）;

这样做将允许您安全地侦听对输入的更改，就像您经常使用事件哈希一样。