Select a value from a select box and auto select a value from another select box using jquery

Question

I have two select boxes. The first select box has the id #first and the second select box has the id #second.

Each select box has two options with values 1,2. I want when i select the first option from the first select box to auto select the second option from the second select box AND when i select the second option from the first box to auto select the first option of the second select box:

Here is my code:

 $(document).ready(function() { $('#first').change(function() { var val = $('#first').prop('selectedIndex'); $("#second").prop('selectedIndex', val); if (val == "1") { $("#second").prop('selectedIndex', val == "2"); } else if (val == "2") { $("#second").prop('selectedIndex', val == "1"); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <select name="first" style="cursor:pointer;" id="first" placeholder="Please select"> <option value="" disabled="" selected="" hidden="">First select</option> <option value="1" style="color:#000;">I want an apple</option> <option value="2" style="color:#000;">I want an orange</option> </select> <select name="second" style="cursor:pointer;" id="second" placeholder="Please select"> <option value="" disabled="" selected="" hidden="">Second select</option> <option value="1" style="color:#000;">You got an orange</option> <option value="2" style="color:#000;">You got an apple</option> </select>

Answer 1

You can set a select by its value using .val() , in your case as you only have 2 values you can set the new value via the option value= instead of its selectedIndex using:

$("#second").val(val == 1 ? 2 : 1);

Updated snippet:

 $(document).ready(function() { $('#first').change(function() { var val = $('#first').val() * 1; $("#second").val(val == 1 ? 2 : 1); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <select name="first" style="cursor:pointer;" id="first" placeholder="Please select"> <option value="" disabled="" selected="" hidden="">First select</option> <option value="1" style="color:#000;">I want an apple</option> <option value="2" style="color:#000;">I want an orange</option> </select> <select name="second" style="cursor:pointer;" id="second" placeholder="Please select"> <option value="" disabled="" selected="" hidden="">Second select</option> <option value="1" style="color:#000;">You got an orange</option> <option value="2" style="color:#000;">You got an apple</option> </select>

---

For completeness, to keep using selectedIndex (which is subtly different from value= ), it's very similar as the option values are the same as the index, if they're not then you would need to change the values in the above, but not if using selectedIndex - conversely, if you change the order of the option s then using value will still work while using selectedIndex would stop working.

 $(document).ready(function() { $('#first').change(function() { var val = $('#first').prop('selectedIndex'); $("#second").prop('selectedIndex', val === 1 ? 2 : 1); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <select name="first" style="cursor:pointer;" id="first" placeholder="Please select"> <option value="" disabled="" selected="" hidden="">First select</option> <option value="1" style="color:#000;">I want an apple</option> <option value="2" style="color:#000;">I want an orange</option> </select> <select name="second" style="cursor:pointer;" id="second" placeholder="Please select"> <option value="" disabled="" selected="" hidden="">Second select</option> <option value="1" style="color:#000;">You got an orange</option> <option value="2" style="color:#000;">You got an apple</option> </select>

Answer 2

It will be much easier to make the options on the same index. So apple will be first in the two selects, and orange will be the second in both, so on...

 $(document).ready(function() { $('#first').change(function() { $("#second").prop('selectedIndex', $('#first').prop('selectedIndex')); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <select name="first" style="cursor:pointer;" id="first" placeholder="Please select"> <option value="" disabled="" selected="" hidden="">First select</option> <option value="1" style="color:#000;">I want an apple</option> <option value="2" style="color:#000;">I want an orange</option> </select> <select name="second" style="cursor:pointer;" id="second" placeholder="Please select"> <option value="" disabled="" selected="" hidden="">Second select</option> <option value="1" style="color:#000;">You got an apple</option> <option value="2" style="color:#000;">You got an orange</option> </select>