联动下拉框：当一个下拉框选项被选中时，如何控制另一个下拉框的选择？

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

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

});