Question

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

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

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，您无法像普通change小部件一样使用正常<select>事件，但实际上您需要将displayChatScreen方法附加到change handler provided by select2 }。

e.g。

$('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： $（＆＃39;输入[名称=＆＃34; SomeName＆＃34;]＆＃39）。SELECT2（选项）;

这样做可以让您安全地听取输入的更改，就像您经常使用事件哈希一样。

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

2 个答案: