javascript - 在选择选项上绑定(bind)事件

Question

我有以下 HTML

<select>
  <option value="">filter</option>
  <option data-behavior="toggle-visibility" data-scope="a" value="a">a</option>
  <option data-behavior="toggle-visibility" data-scope="b" value="b">b</option>
</select>

当选择任何选项时，我需要启动 Javascript 回调。

我有以下一段 Javascript:

$(function() {
   $(document).on("EVENT", "[data-behavior~=toggle-visibility]", function() {
   ...
  });
});

我可以利用某个事件来实现我的目标吗？

PS - 我知道我可以将 data-behavior="toggle-visibility" 移动到 select 标签，然后监听 change 并获取当前选择的值。但是，由于该 Javascript 片段已与其他元素一起使用，因此我需要在 option 上保留 data-behavior 属性。

它应该在这里工作 https://jsfiddle.net/xpvt214o/535895/

Answer 1

您应该使用更改事件:

示例如下:

$("select").on("change", function(e) {
  var sel = $(this).find(":selected");
  var attr = sel.attr("data-behavior");
  console.log(attr + "....." + $(this).val())
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="">filter</option>
  <option data-behavior="toggle-visibility" data-scope="a" value="a">a</option>
  <option data-behavior="toggle-visibility" data-scope="b" value="b">b</option>
</select>