jquery - 如何根据另一个选择框的选择更改选择框的选项值

Question

在下面的代码中，我尝试根据我在第一个选择框中选择的内容来更改第二个选择框的选项。因此，当我从第一个选择框中选择 value="1" 时，第二个选择框必须更改为 value="3" 等。

这是代码:

$(function() {
  $('#itemconditionid').change(function() {
    $('#meta_itemcondition').val($(this).val())
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select id="itemconditionid">
  <option value="">Choose</option>
  <option value="1">New</option>
  <option value="2">Used</option>
</select>

<select id="meta_itemcondition">
  <option value="">Choose</option>
  <option value="3">Yeah! It's New Baby</option>
  <option value="4">Ouch! I hate used stuff</option>
</select>

Answer 1

使用selectedIndex。根据该索引更改第二个下拉选项。

$(function() {
  $('#itemconditionid').change(function() {
    $("#meta_itemcondition").prop('selectedIndex', $(this)[0].selectedIndex);
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select id="itemconditionid">
  <option value="">Choose</option>
  <option value="1">New</option>
  <option value="2">Used</option>
</select>

<select id="meta_itemcondition">
  <option value="">Choose</option>
  <option value="3">Yeah! It's New Baby</option>
  <option value="4">Ouch! I hate used stuff</option>
</select>