Question

我目前有一个具有onchange功能的选择菜单，当选择新选项时，该功能将打印HTML消息。我还有一个具有onclick功能的按钮，该功能将更改选择菜单中的当前选择的选项，但是，当单击该按钮并且更改了选择菜单时，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>

Answer 1

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

<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和{ {1}}：

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();
}

链接按钮Onclick与选择菜单Onchange

1 个答案: