javascript - 递归 onchange 事件未触发

标签 javascript jquery html drop-down-menu onchange

我有这段代码,我想在更改第一个下拉列表后更新所有下拉列表。但是当我使用 onchange 时,只更新了一个下拉列表。例如,我更改了第一个下拉列表,仅更新了第二个下拉列表,即使我也已经将 onchange 事件放在第二个下拉列表上,但它不起作用。

这是代码。感谢您的帮助。

function myFunction0() {
  var x = document.getElementById("mySelect0").value;
  document.getElementById("mySelect1").value = 'BMW';
  document.getElementById("demo").innerHTML = "You selected: " + x;
}

function myFunction1() {
  var x = document.getElementById("mySelect1").value;
  document.getElementById("mySelect2").value = 'Mercedes';
  document.getElementById("demo").innerHTML = "You selected: " + x;
}

function myFunction2() {
  var x = document.getElementById("mySelect0").value;
  document.getElementById("demo").innerHTML = "You selected: " + x;
}
<!DOCTYPE html>
<html>

<body>

  <p>Select a new car from the list.</p>

  1
  <select id="mySelect0" onchange="myFunction0()">
    <option value="Audi">Audi
      <option value="BMW">BMW
        <option value="Mercedes">Mercedes
          <option value="Volvo">Volvo
  </select>
  2
  <select id="mySelect1" onchange="myFunction1()">
    <option value="Audi">Audi
      <option value="BMW">BMW
        <option value="Mercedes">Mercedes
          <option value="Volvo">Volvo
  </select>
  3
  <select id="mySelect2">
    <option value="Audi">Audi
      <option value="BMW">BMW
        <option value="Mercedes">Mercedes
          <option value="Volvo">Volvo
  </select>

  <p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>

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

</body>

</html>

最佳答案

onchange 或其他事件不会通过使用代码设置元素的值来触发,而是通过浏览器中的真实(用户)事件触发。您必须手动触发这些事件,手动更新其他 2 个选择,或者找到一些 jquery 代码。

关于javascript - 递归 onchange 事件未触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31606531/

相关文章:

javascript - 我的自定义范围脚本的 RegExp 问题

javascript - 从 html 中删除完整的 href 链接标签

javascript - SetTimeout 在警报时暂停

jquery 1.4 .each 上的实时行为?

javascript - 在angularjs中单击按钮的ng-click中获取语法错误

javascript - 将目标 ="_blank"添加到 anchor 标记

javascript - 使用所选插件禁用后如何使选择框不可点击

html - 为什么我的标题不向右滚动?

javascript - 如何在 JavaScript 中查找多个表单输入值的数字总和?

javascript - 拖动事件时如何禁用弹出窗口?