Javascript JS脚本-依赖于值（多个下拉列表）

现在我有两个下拉列表，目标是让用户在第一个选项上选择OFF，第二个下拉列表自动选择on，反之亦然

下面的代码和JavaScript一起工作，但只适用于一对下拉列表。我想知道我需要做些什么改变才能使它在未来适用于两对甚至四对

代码：

目前： 选择选项 关 在…上 麦克风： 选择选项 在…上 关 目前： 选择选项 关 在…上 麦克风： 选择选项 在…上 关 const cmmicrophone=document.querySelectorAll'.select1'[0]； 常量麦克风=document.querySelectorAll'.select2'[0]； 函数inputHandlerthisSelect，otherSelect{ otherSelect.selectedIndex=此select.selectedIndex } CMMicrophone.addEventListener'change'，事件=>{ inputHandlercmicrophone、麦克风； }; 麦克风.addEventListener'change'，事件=>{ Inputhandler话筒、CMmicrophone； };

---

我建议使用document.getElementById而不是querySelectorAll。问题是您总是访问第一个元素0。您还需要确保每个“id”属性具有唯一的值；在上面的代码中，麦克风和CMMicrophone的值重复

您需要为动态选择数添加一个循环，方法是获取所有选择并对其进行迭代以映射每个事件处理程序：

const cmicrophones = document.querySelectorAll('.select1');
const microphones = document.querySelectorAll('.select2');
for (var i = 0; i < cmicrophones.length; i++) {
  const cmicrophone = cmicrophones[i];
  const microphone = microphones[i];

  ....
}

这是你的解决方案

目前： 选择选项 关 在…上 麦克风： 选择选项 在…上 关 目前： 选择选项 关 在…上 麦克风： 选择选项 在…上 关 var cmicrophone=document.querySelectorAll'.select1'； var麦克风=document.querySelectorAll'.select2'； 函数inputhandlercmicrophone thissect，otherSelect，j{ var test=document.querySelectorAll'.select1'；

---

fori=0；我在我的回答中提供了一个例子；你不明白什么部分？因此，如果id不同，那么说microphone1和cmmicrophone1，我将继续for循环….const cmmicrophone1=cmmicrophone1[I]在我提供的示例中，我没有使用ID。我建议使用ID，因为通过ID查找要比通过QuerySelector查找快得多。如果我错了，请告诉我。您在select1和Select2上调用select all，这将是变量。for循环是？我不明白。我不希望所有这些变量都链接在一起h、 请解释清楚你想要什么。我可以帮你。谢谢。现在你的代码影响两对下拉列表。我需要它们独立，因为我最终会有4对下拉列表。我不能让它们全部链接在一起。它们都应该有相同的功能，如果一个选择是，那么另一个选择否和vice versa，但不能像现在这样链接sirI会的。非常感谢。