如何在联动下拉框中处理选项差异：选中Audi时同步选Please-Select

你只需要修改原有的JavaScript代码，增加对"Audi"选项的判断逻辑即可，同时保留原有联动功能：

修改后的完整代码 #

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

<script>
$(document).on('change', '[name="cars"]', function(){
  const selectedValue = $(this).val();
  // 判断是否是第一个下拉框选中了Audi
  if ($(this).attr('id') === 'cars1' && selectedValue === 'audi') {
    $('#cars2').val(''); // 第二个下拉框选中Please-Select
  } else {
    // 其他情况保持原有联动
    $('[name="cars"]').val(selectedValue);
  }
});
</script>

逻辑说明 #

• 当触发change事件的是第一个下拉框（cars1），且选中的值是audi时，单独给第二个下拉框（cars2）设置值为空，对应Please-Select选项；
• 其他所有情况（比如选中其他车型，或者从第二个下拉框选择选项），依然保留原有的同步选中相同选项的功能。

内容的提问来源于stack exchange，提问作者cvz