Question

我正在撰写一个非常基本的网站，其中涉及用户使用下拉菜单选择一个选项，它会在播放时发出声音。

如果用户希望每次都选择不同的选项，但是如果他们从一个<option>播放声音，那么这种方式可以正常工作，然后又想通过再次“选择”再次播放它。我说“再次选择它”因为它已被选中，所以点击选择框并选择相同的选项将不会是onChange，这不会触发事件。

如何实现它，以便点击<option>时，无论是否选择了JS，它都会执行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

我想你也想绑定点击处理程序。

内联事件绑定的JavaScript

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

没有内联事件绑定的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()

使用onChange在选择元素上触发JS，但是如果已经选择了它？

1 个答案: