javascript - 使用 onChange 在选择元素上触发 JS，但如果它已经被选中？

Question

我正在编写一个非常基本的网站，其中涉及用户使用下拉菜单来选择一个选项，并且当他们这样做时它会播放声音。

如果用户每次都想选择不同的选项，则此方法可以正常工作，但如果他们播放 <option> 中的一个声音，则效果不佳。 ，然后想通过再次“选择”它来再次播放它。我说“再次选择它”是因为它已经被选中，所以单击选择框并选择相同的选项不会是 onChange，这不会触发该事件。

如果您点击<option>，您如何实现它？ ，无论是否选择都会执行该JS？

<select onchange="document.getElementById(this.options[this.selectedIndex].value).play()">
    <option>Select</option>
    <option value="1">Sound one</option>
    <option value="2">Sound two</option>
    <option value="3">Sound three</option>
    <option value="4">Sound four</option>
</select>

Answer 1

我认为您也想绑定(bind)点击处理程序。

具有内联事件绑定(bind)的 JavaScript

<select 
   onclick="document.getElementById(this.options[this.selectedIndex].value).play()" 
   onchange="document.getElementById(this.options[this.selectedIndex].value).play()">
...
</select>

没有内联事件绑定(bind)的 JavaScript

<select id="myselect">...</select>

<script type="text/javascript">
  function selectClickChange() {
    document.getElementById(this.options[this.selectedIndex].value).play();
  }

  document.getElementById("myselect").onchange = selectClickChange;
  document.getElementById("myselect").onclick = selectClickChange;

</script>

jQuery

<select id="myselect">...</select>

<script type="text/javascript>
  $(document).ready(function () {
    $('#myselect').bind("change click", function () {
      $('#' + $(this).val())[0].play();
    });
  });
</script>

注意:如果您使用 jQuery 1.7 或更高版本，您应该开始使用 on()而不是bind()