链接按钮 Onclick 与选择菜单 Onchange答案

【问题标题】：Linking Button Onclick With Select Menu Onchange链接按钮 Onclick 与选择菜单 Onchange
【发布时间】：2019-05-26 22:39:11
【问题描述】：

i当前有一个选择的菜单，该菜单具有OnChange功能，该功能将在选择新选项时打印HTML消息。我还有一个具有 onclick 功能的按钮，该功能将更改选择菜单中的当前 celected 选项，但是，当单击按钮并更改选择菜单时，onchange 功能不会启动。单击按钮时，如何使 onchange 功能起作用？我不想仅仅将 onchange 函数作为按钮中的 onclick 选项启动，因为我也想更改选择菜单。

<html>
    <select id="sel" onchange='myFunction()'>
        <option value="car">1</option>
        <option value="bike">2</option>
        <option value="cycle">3</option>
    </select>

    <button onclick='selectChange()'>Click me</button>

    <p id="demo"></p>

    <script>
    function myFunction() {
        document.getElementById("demo").innerHTML = "Hello World";
    }

    function selectChange(){
        document.getElementById('sel').value = "bike";
    }
    </script>
</html>

【问题讨论】：

标签： javascript html

【解决方案1】：

只需从内部selectChange()调用myFunction()：

<html>
<select id="sel" onchange='myFunction()'>
  <option value="car">1</option>
  <option value="bike">2</option>
  <option value="cycle">3</option>
</select>

<button onclick='selectChange()'>Click me</button>

<p id="demo"></p>

<script>
  function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World";
  }

  function selectChange() {
    document.getElementById('sel').value = "bike";
     myFunction();
  }
</script>

</html>

但请注意，您还应该使用 Unobstructive JavaScript，并使用 event listeners 而不是 onchange 和 onclick：

document.getElementById('sel').addEventListener('change', myFunction);
document.getElementsByTagName('button')[0].addEventListener('click', selectChange);

function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

function selectChange() {
  document.getElementById('sel').value = "bike";
  myFunction();
}

<select id="sel">
  <option value="car">1</option>
  <option value="bike">2</option>
  <option value="cycle">3</option>
</select>

<button>Click me</button>

<p id="demo"></p>

【讨论】：

谢谢！使用不显眼的 javascript 的建议正是我需要/应该做的。