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已经与其他元素一起使用，因此我需要在data-behavior上保留option属性。

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

Answer 1

您应该改用on change事件：

示例如下：

$("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>

Answer 2

我希望这会起作用...编码愉快：）

$("select").on("change", (e) => {
  console.log(e.target.value)
})

<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>

在选择选项上绑定事件

2 个答案: