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.

As per you comment, you need both selects to be linked in/out.

I have added IDs to both selects for a easier selection, and an attribute for the targeted select. Then you test the selected option in its targeted select. 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.

<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->

$(document).ready(function(){
  
$('select').on('change', function() {
  // the value of the selected select
  var selected_select = $(this).attr('id');
  //  the value of the targeted select
  var selected_target = $(this).attr('data-target');
  // the value of the option
  var selectedValue = $(this).val();

   // check if the targeted value exists (true / false)
   var targetedValue = $('#'+selected_target+' option[value='+selectedValue+']').length > 0;

  $('#'+selected_select+' option[value='+selectedValue+']').prop('selected', true);

    // if value exists (true) then mark it as selected, else, pick the default option
    if(targetedValue === true) { 
      $('#'+selected_target+' option[value='+selectedValue+']').prop('selected', true);
    } else { 
      //$('#'+selected_target+' option[value=""]').attr('selected','selected');
      $('#'+selected_target+' option[value=""]').prop('selected', true);
    }
});

});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="cars1">Choose a car:</label>
    <select name="cars1" id="cars1" data-target="cars2">
    <option value="">Please-Select</option>
    <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" data-target="cars1">
    <option value="">Please-Select</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="mclaren">McLaren</option>
    </select>

<!-- end snippet -->

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>

3. 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:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(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);
});

<!-- language: lang-html -->

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

<!-- end snippet -->