CODEWITHSUNDEEP
javascriptjquerydrop-down-menu
Nardong Bagsik
Nardong Bagsik

Reputation: 228

Set option of the 2nd Select based on the 1st Select

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?

Upvotes: 1

Views: 514

Answers (3)

31piy
31piy

Reputation: 23859

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>

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 371019

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>

Upvotes: 1

Vineesh
Vineesh

Reputation: 3782

You can select the second select box option using 

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

Upvotes: 1

Related Questions