Question

我有2个选择选项

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

您可以使用

选择第二个选择框选项

$('#footer_mselect').find('option[text="' + stext + '"]').prop('selected', true);

Answer 2

尝试直接选择具有所需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>

Answer 3

您可以将第一个值设置为秒，因为两个下拉列表共享同一组值。

在第一个下拉列表中使用val()获取所选选项的值。
再次使用val()将值设置为第二个下拉列表。

查找下面的工作演示：

＆＃13;

$('#header_mselect').on('change', function() {
  var svalue = $(this).val();
  $('#footer_mselect').val(svalue);
});

＆＃13;

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

＆＃13;

根据第一选择设置第二选择的选项

3 个答案: