JavaScript - 取决于下拉值

Question

我现在有两个下拉菜单。我希望当用户选择“否”时，其他人会自动选择"is"，反之亦然。

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

代码:

	<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

Answer 1

您可以为每个 select 元素分配相同的类并绑定(bind) change 事件监听器。

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

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