未触发递归 onchange 事件答案

【问题标题】：recursive onchange event not triggered未触发递归 onchange 事件
【发布时间】：2015-07-24 09:10:25
【问题描述】：

我有这段代码，我想在更改第一个下拉菜单后更新所有下拉菜单。但是当我使用 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>

【问题讨论】：

无效的 HTML； <option> 未关闭

标签： javascript jquery html drop-down-menu onchange

【解决方案1】：

onchange 或其他事件不会通过使用代码设置元素的值来触发，它们会从浏览器中的真实（用户）事件触发。您必须手动触发这些事件，手动更新其他 2 个选择，或者为其查找一些 jquery 代码。

【讨论】：

【解决方案2】：

来自MDN Event.change

取决于被改变的表单元素的种类和改变的方式用户与元素交互时，更改事件会在不同的位置触发时刻：

当元素被激活时（通过单击或使用键盘） for and ;

当用户明确提交更改时（例如，通过单击鼠标从 a 的下拉列表中选择一个值，通过选择 a
日期选择器中的日期，通过选择文件
等的文件选择器中）；

当元素在其值更改后失去焦点但未提交时（例如，在编辑或类型=“文本”>）。

所以使用 javascript 更改值不会触发 change 事件。但是您仍然可以创建一个更改事件，然后从目标触发它。

function myFunction0() {
  var x = document.getElementById("mySelect0").value;
  document.getElementById("mySelect1").value = 'BMW';
  document.getElementById("demo").innerHTML = "You selected: " + x;
  // Trigger change event on mySelect1
  document.getElementById("mySelect1").dispatchEvent(new Event('change'));
}

function myFunction1() {
  var x = document.getElementById("mySelect1").value;
  document.getElementById("mySelect2").value = 'Mercedes';
  document.getElementById("demo").innerHTML = "You selected: " + x;
  // Trigger change event on mySelect2
  document.getElementById("mySelect2").dispatchEvent(new Event('change'));
}

function myFunction2() {
  console.log(x);
  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" onchange="myFunction2()">
    <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>

【讨论】：