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

时间:2015-04-10 10:04:17

标签: javascript jquery html

我有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函数?

1 个答案:

答案 0 :(得分:3)

您可以使用 change() 事件处理程序

完成此类操作

&#13;
&#13;
var $select = $('#abc,#xyz');
$select.change(function() {
  $select.val(this.value);
}).change();
&#13;
<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>
&#13;
&#13;
&#13;