Question

我现在有两个下拉菜单。我希望当用户选择＆＃34; NO＆＃34;另一个自动选择＆＃34; YES＆＃34;反之亦然。

我假设我在这里使用JS来实现这一点，但不知道从哪里开始。下面是我的下拉html代码。如果有人可以帮助我开始，那将会有所帮助。

代码：

＆＃13;

	<div class="cmicrophone" id="cmicrophone">Currently:
				<select id="cmicrophone" name="cmicrophone">
					<option value=" " selected = "selected"> </option>
					<option value="on">ON</option>
					<option value="off">OFF</option>
				</select>
			</div>				
			<div class="microphone" id="microphone">Microphone:
				<select id="microphone" name = "microphone">
					<option value=" " selected="selected"> </option>
					<option value="on" >ON</option>
					<option value="off">OFF</option>
				</select>
			</div

＆＃13;

Answer 1

您可以为每个select元素分配一个相同的类，并绑定change事件侦听器。

＆＃13;

$('.elem').on('change', function() {
  if ($(this).val() == 'on') {
    $('.elem').not(this).val('off');
  } else {
    $('.elem').not(this).val('on');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cmicrophone" id="cmicrophone">Currently:
  <select id="cmicrophone" class='elem' name="cmicrophone">
    <option value="" selected = "selected"></option>
    <option value="on">ON</option>
    <option value="off">OFF</option>
  </select>
</div>

<div class="microphone" id="microphone">Microphone:
  <select id="microphone" class='elem' name="microphone">
    <option value="" selected = "selected"></option>
    <option value="on">ON</option>
    <option value="off">OFF</option>
  </select>
</div>

＆＃13;

Answer 2

一个选择的好起点可能是listening for changes，当change发生时，selecting另一个<select>和setting the right value

Answer 3

这是一个vanilla JS解决方案（不需要jquery）。

这里的想法是：

选择两个<select>元素并将其保存到变量中以便稍后使用document.querySelector
在调用函数来处理事件的两个元素上添加input event listeners
然后在函数selectElement.selectedIndex内使用来检查一个元素的选定索引，并使用它来设置另一个元素的值。

// select the `<select>` elements
const cmicrophone = document.querySelector('#cmicrophone');
const microphone = document.querySelector('#microphone');

// define function to handler the events
function inputHandler(thisSelect, otherSelect) {
  if (thisSelect.selectedIndex == 1) {
    otherSelect.selectedIndex = 2;
  } else if (thisSelect.selectedIndex == 2) {
    otherSelect.selectedIndex = 1;
  } else {
    thisSelect.selectedIndex = 0;
    otherSelect.selectedIndex = 0;
  }
}

// add event listeners that will 'fire' when the input of the <select> changes
cmicrophone.addEventListener('input', event => {
  inputHandler(cmicrophone, microphone);
});

microphone.addEventListener('input', event => {
  inputHandler(microphone, cmicrophone);
});

<div>Currently:
  <select id="cmicrophone" name="cmicrophone">
    <option value=" " selected = "selected"> </option>
    <option value="on">ON</option>
    <option value="off">OFF</option>
  </select>
</div>
<div>Microphone:
  <select id="microphone" name="microphone">
    <option value=" " selected="selected"> </option>
    <option value="on" >ON</option>
    <option value="off">OFF</option>
  </select>
</div>

还要补充一点：您为多个id分配了相同的值。您应该只为每个元素分配一个唯一的id。

JavaScript - 依赖于下拉值

3 个答案: