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

Question

I have 2 select option

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

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>

And this my code in header change

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

My problem here is that i want to set the value or the option of 2nd select based on 1st select during selecting the option on the 1st one but its not working whats wrong?

Answer 1

您可以使用选择第二个选择框选项

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

Answer 2

Try select the element with the desired value directly rather than using a loop (and use the proper selector; you have no orderselect in your code):

 $('#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

You can set the value of the first to the second, since both of the dropdowns share the same set of values.

1. Get the selected option's value using val() on the first dropdown itself.
2. Set the value to the second dropdown using val() again.

Find a working demo below:

 $('#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>