javascript - 根据第一个选择设置第二个选择的选项

Question

我有两个选择

选择 1

<select id="header_mselect" name="header_mselect" class="form-control col-tablefont">
    <option selected="true" value="0">Select</option> 
    <option value="1">Approved</option>
    <option value="2">Disapproved</option>
    <option value="3">Hold</option>
</select>

选择 2

<select id="footer_mselect" name="footer_mselect" class="form-control col-tablefont">
    <option selected="true" value="0">Select</option> 
    <option value="1">Approved</option>
    <option value="2">Disapproved</option>
    <option value="3">Hold</option>
</select>

这是我在标题更改中的代码

$('#header_mselect').on('change', function() {
    var svalue = $('#header_mselect :selected').val();
    var stext = $('#header_mselect :selected').text();
    $('#footer_mselect').find('option[text="' + stext + '"]').val();
});

我的问题是，我想在选择第一个选项时根据第一个选择设置第二个选择的值或选项，但它不起作用怎么了？

Answer 1

尝试直接选择具有所需 value 的元素，而不是使用循环(并使用正确的选择器；您的代码中没有 orderselect):

$('#header_mselect').on('change', function() {
  var svalue = $('#header_mselect :selected').val();
  var stext = $('#header_mselect :selected').text();
  $('#footer_mselect > option[value="' + svalue + '"]').prop('selected', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="header_mselect" name="header_mselect" class="form-control col-tablefont">
  <option selected="true" value="0">Select</option>
  <option value="1">Approved</option>
  <option value="2">Disapproved</option>
  <option value="3">Hold</option>
</select>

<select id="footer_mselect" name="footer_mselect" class="form-control col-tablefont">
  <option selected="true" value="0">Select</option>
  <option value="1">Approved</option>
  <option value="2">Disapproved</option>
  <option value="3">Hold</option>
</select>