Question

现在我有两个下拉菜单，目标是让用户在第一个选项上选择“关闭”，第二个下拉菜单自动选择“开启”，反之亦然。

目前下面的代码与JavaScript一起使用，但仅适用于一对下拉列表。我想知道我需要改变什么才能让它在未来对两对甚至四对都有效。

代码：

<!DOCTYPE html>
<html>
<body>
				<div class="cmicrophone" id="cmicrophone">Currently:
					<select id="cmicrophone" class="cmicrophone select1" name="cmicrophone" onchange="">
						<option value="">Select Option</option>
						<option value="'S microphone is currently on. Please remind them to turn it ">OFF</option>
						<option value="'S microphone is currently off. Please remind them to turn it ">ON</option>
					</select>
				</div>		
				<div class="microphone" id="microphone">Microphone:
					<select id="microphone" class="microphone select2" name = "microphone">
						<option value=" "  selected="selected">Select Option</option>
						<option value="ON. Thank you.">ON</option>
						<option value="OFF. Thank you.">OFF</option>
					</select>
				</div>	
				

				<br>
				
				<div class="cmicrophone" id="cmicrophone">Currently:
					<select id="cmicrophone" class="cmicrophone select1" name="cmicrophone" onchange="">
						<option value="">Select Option</option>
						<option value="'S microphone is currently on. Please remind them to turn it ">OFF</option>
						<option value="'S microphone is currently off. Please remind them to turn it ">ON</option>
					</select>
				</div>		
				<div class="microphone" id="microphone">Microphone:
					<select id="microphone" class="microphone select2" name = "microphone">
						<option value=" "  selected="selected">Select Option</option>
						<option value="ON. Thank you.">ON</option>
						<option value="OFF. Thank you.">OFF</option>
					</select>
				</div>	
			</form>
		</div>
    <script>
const cmicrophone = document.querySelectorAll('.select1')[0];
const microphone = document.querySelectorAll('.select2')[0];
function inputHandler(thisSelect, otherSelect) {
 otherSelect.selectedIndex =thisSelect.selectedIndex
        }
        cmicrophone.addEventListener('change', event => {
		  inputHandler(cmicrophone, microphone);
		});

		microphone.addEventListener('change', event => {
		  inputHandler(microphone, cmicrophone);
		});
</script>
</body>
</html>

Answer 1

这是您的解决方案

<!DOCTYPE html>
<html>
<body>
				<div class="cmicrophone" id="cmicrophone">Currently:
					<select id="cmicrophone" class="cmicrophone select1" name="cmicrophone" onchange="">
						<option value="">Select Option</option>
						<option value="'S microphone is currently on. Please remind them to turn it ">OFF</option>
						<option value="'S microphone is currently off. Please remind them to turn it ">ON</option>
					</select>
				</div>		
				<div class="microphone" id="microphone">Microphone:
					<select id="microphone" class="microphone select2" name = "microphone">
						<option value=" "  selected="selected">Select Option</option>
						<option value="ON. Thank you.">ON</option>
						<option value="OFF. Thank you.">OFF</option>
					</select>
				</div>	
				

				<br>
				
				<div class="cmicrophone" id="cmicrophone">Currently:
					<select id="cmicrophone" class="cmicrophone select1" name="cmicrophone" onchange="">
						<option value="">Select Option</option>
						<option value="'S microphone is currently on. Please remind them to turn it ">OFF</option>
						<option value="'S microphone is currently off. Please remind them to turn it ">ON</option>
					</select>
				</div>		
				<div class="microphone" id="microphone">Microphone:
					<select id="microphone" class="microphone select2" name = "microphone">
						<option value=" "  selected="selected">Select Option</option>
						<option value="ON. Thank you.">ON</option>
						<option value="OFF. Thank you.">OFF</option>
					</select>
				</div>	
			</form>
		</div>
    <script>
var cmicrophone = document.querySelectorAll('.select1');
var microphone = document.querySelectorAll('.select2');
 
function inputHandlerCmicrophone(thisSelect, otherSelect, j) {
    
    var test = document.querySelectorAll('.select1');
    for(i=0; i<test.length; i++){
        if(test[i] == j){
            otherSelect[i].selectedIndex =thisSelect[i].selectedIndex
            break;
}
}

 
        }
   function inputHandlerMicrophone(thisSelect, otherSelect, j) {

    var test = document.querySelectorAll('.select2');
    for(i=0; i<test.length; i++){
        if(test[i] == j){
            otherSelect[i].selectedIndex =thisSelect[i].selectedIndex
            break;
}

 
        }}
        for(i=0; i<cmicrophone.length; i++) {
            cmicrophone[i].addEventListener('change', function (e) {
		  inputHandlerCmicrophone(cmicrophone, microphone, e.target);
		});
}
        
        for(k=0; k<microphone.length; k++) {
            microphone[k].addEventListener('change', function (e) {
		  inputHandlerMicrophone(microphone, cmicrophone, e.target);
		});
}
		
</script>
</body>
</html>

Answer 2

我建议使用document.getElementById（）而不是querySelectorAll（）。问题是，您始终要访问第一个元素0.您还需要确保每个ID都有唯一的值。属性;在上面的代码中，你有麦克风和cmicrophone的重复值。

您需要通过获取所有选项并迭代它们以映射每个事件处理程序来为动态选择选项添加一个循环：

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];

  ....
}

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

2 个答案: