使用基于其他选择选项框的jquery选择选项

Question

我有2个选择框。 我想根据第一个框中选择的选项操纵另一个框。

<select name="abc" id="abc">
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
</select>

第二个选择框

<select name="xyz" id="xyz">
  <option value="1">X</option>
  <option value="2">Y</option>
  <option value="3">Z</option>
</select>
<br>

现在我想要的是，当页面加载时，如果我选择选项1即A，则第二个复选框应自动设置为选项3，即Z，反之亦然。 如果我在第一个选择框中选择选项2即B，则第二个选择框应显示选项1，即X，反之亦然，依此类推。 使用什么jquery函数？

Answer 1

你可以使用change()事件处理程序来做这样的事情

 var $select = $('#abc,#xyz'); $select.change(function() { $select.val(this.value); }).change(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select name="abc" id="abc"> <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> </select> <select name="xyz" id="xyz"> <option value="2">X</option> <option value="3">Y</option> <option value="1">Z</option> </select>