根據第一個選擇設置第二個選擇的選項

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

您可以將第一個值設置為第二個值，因為兩個下拉列表共享相同的值集。

1. 使用第一個下拉菜單本身上的val()獲取所選選項的值。
2. 再次使用val()將值設置為第二個下拉列表。

在下面找到有效的演示：

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

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