Question

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

Answer 1

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

Answer 2

来自MDN Event.change

取决于要更改的表单元素的种类和方式   用户与元素交互，更改事件以不同的方式触发   时刻：


激活元素（通过单击或使用键盘）和;

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

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

因此使用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>

递归onchange事件未触发

2 个答案: