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

本文档旨在提供一种解决方案，实现在两个下拉框之间建立联动关系。当第一个下拉框中选择某个选项时，根据该选项是否存在于第二个下拉框中，自动选择第二个下拉框中的对应选项，如果不存在，则选择第二个下拉框的默认选项。我们将使用 jQuery 来实现这一功能，并提供详细的代码示例和解释。

实现联动下拉框

要实现联动下拉框，我们需要监听第一个下拉框的 change 事件。当事件触发时，获取被选中的值，然后在第二个下拉框中查找是否存在该值对应的选项。如果存在，则选中该选项；如果不存在，则选中第二个下拉框的默认选项。

HTML 结构

首先，定义两个下拉框，并为它们添加 id 和 data-target 属性。id 属性用于唯一标识每个下拉框，data-target 属性用于指定联动目标下拉框的 id。

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

jQuery 代码

接下来，使用 jQuery 来实现联动逻辑。

Otter.ai

一个自动的会议记录和笔记工具，会议内容生成和实时转录

下载

$(document).ready(function(){

  $('select').on('change', function() {
    // 获取当前被选中的 select 元素的 id
    var selected_select = $(this).attr('id');
    // 获取目标 select 元素的 id
    var selected_target = $(this).attr('data-target');
    // 获取当前选中的 option 的值
    var selectedValue = $(this).val();

    // 检查目标 select 中是否存在具有相同值的 option
    var targetedValue = $('#'+selected_target+' option[value='+selectedValue+']').length > 0;

    // 确保当前 select 中的选中项保持选中状态
    $('#'+selected_select+' option[value='+selectedValue+']').prop('selected', true);

    // 如果目标 select 中存在具有相同值的 option，则选中它，否则选中默认选项
    if(targetedValue === true) {
      $('#'+selected_target+' option[value='+selectedValue+']').prop('selected', true);
    } else {
      $('#'+selected_target+' option[value=""]').prop('selected', true);
    }
  });

});

代码解释

1. $(document).ready(function(){ ... });：确保在 DOM 加载完成后执行代码。
2. $('select').on('change', function() { ... });：监听所有 <select> 元素的 change 事件。
3. var selected_select = $(this).attr('id');：获取当前触发 change 事件的 <select> 元素的 id。
4. var selected_target = $(this).attr('data-target');：获取当前 <select> 元素 data-target 属性的值，即目标 <select> 元素的 id。
5. var selectedValue = $(this).val();：获取当前选中的 <option> 元素的值。
6. var targetedValue = $('#'+selected_target+' option[value='+selectedValue+']').length > 0;：检查目标 <select> 元素中是否存在 value 属性与当前选中的 <option> 元素值相同的 <option> 元素。length > 0 返回一个布尔值，表示是否存在匹配的元素。
7. $('#'+selected_select+' option[value='+selectedValue+']').prop('selected', true);：保持当前选中的select的选中项。
8. if(targetedValue === true) { ... } else { ... }：如果目标 <select> 元素中存在匹配的 <option> 元素，则选中它；否则，选中 value 为空的 <option> 元素，通常作为默认选项。
9. $('#'+selected_target+' option[value=""]').prop('selected', true);：选中目标 <select> 元素中 value 属性为空的 <option> 元素。

注意事项

• 确保引入 jQuery 库。
• data-target 属性的值必须与目标下拉框的 id 属性值一致。
• 默认选项的 value 属性应该为空字符串 ""。
• 此代码适用于多个联动下拉框，只需为每个下拉框正确设置 id 和 data-target 属性即可。

总结

通过以上步骤，我们成功实现了联动下拉框的功能。当第一个下拉框的选项发生改变时，第二个下拉框会根据第一个下拉框的选择自动进行相应的选择，从而提高了用户体验。这种方法简单易懂，易于扩展，可以应用于各种需要联动下拉框的场景。