Question 168366 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to select a particular dropdown when an option is selected in other dropdown?

2 dropdowns with similar options but 1 change in options. In the first dropdown Audi exists but not in second dropdown.

This selects the same option in each dropdowns when selected as required.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="cars">Choose a car:</label>
<select name="cars" id="cars1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<br><br>

<label for="cars">Choose a car:</label>
<select name="cars" id="cars2">
  <option value="">Please-Select</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
</select>

$(document).on('change', '[name="cars"]', function(){
  $('[name="cars"]').val( $(this).val() );
})

When I select the “Audi” option, how do I select “Please-Select” option while retaining the current functionality.

Tags:

2

Answers


  1. 0

    Changed the selectors, to select by ID.

    Saved the selected value in a variable, and on change, checking if the value is audi, then the selected value on the second select="cars" will be the empty value, which is Please-select.

    NOTES:

    1. Added a new function when the page is loaded, to change the value of the second select as the first one. Deleting this function won’t affect your requirements. Feel free to modify it as you like.
    2. The for attribute is to target the input that related to label, and it has to be the id of the target input which is a unique value, so I changed the for attributes values to match the id‘s of the inputs.
    <label for="cars1">Choose a car:</label>
<select name="cars" id="cars1">
...
</select>

<label for="cars2">Choose a car:</label>
<select name="cars" id="cars2">
...
</select>
    1. Keep in mind, that technically, it is possible to have two inputs with the same name attribute in an HTML form. However, it can lead to unexpected behavior when submitting the form.

    The Code:

    $(document).ready(function(){
  var selectedValue = $('[id="cars1"]').val();
  $('[id="cars2"]').val(selectedValue === 'audi' ? '' : selectedValue);
});

$(document).on('change', '[id="cars1"]', function(){
  var selectedValue = $(this).val();
  $('[id="cars1"]').val(selectedValue);
  $('[id="cars2"]').val(selectedValue === 'audi' ? '' : selectedValue);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<label for="cars1">Choose a car:</label>
<select name="cars" id="cars1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<br><br>
<label for="cars1">Choose a car:</label>
<select name="cars" id="cars2">

  <option value="">Please-Select</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  </select>
    Login or Signup to reply.
  2. 0

    I have added IDs to both selects for a easier selection.

    Then you test the selected option in #2. If it exists, select it. If not, select the default option.

    This way of testing against an existing match will allow to add values without worrying about the second select or differences.

     <label for="cars1">Choose a car:</label>
 <select name="cars1" id="cars1">
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="mercedes">Mercedes</option>
 <option value="audi">Audi</option>
 </select>
 <br><br>
 <label for="cars2">Choose a car: 
 </label>
 <select name="cars2" id="cars2">

 <option value="Please-Select">Please-Select</option>
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="mercedes">Mercedes</option>
 </select>


import $ from "https://cdn.skypack.dev/[email protected]";
$(document).on('change', '[name="cars1"]', function(){
 var thecar=$(this).val();
 if($("#cars2 option[value="+thecar+"]").length > 0) 
 { 
 $('[name="cars2"]').val($(this).val());          
 } else { $('#cars2 option[value="Please-Select"]').prop('selected', true);
});

    Here’s a working pen as I can’t add a snippet.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search