联动下拉框：当一个下拉框选项被选择时，如何联动选择另一个下拉框的特定选项

本文介绍了如何使用 jQuery 实现两个下拉框之间的联动，当第一个下拉框选择某个选项时，自动在第二个下拉框中选择相应的选项。针对两个下拉框选项不完全一致的情况，提供了解决方案，确保在第一个下拉框选择的选项在第二个下拉框不存在时，自动选择第二个下拉框的默认选项。

实现联动下拉框

要实现联动下拉框，我们需要监听第一个下拉框的 change 事件，并在事件处理函数中获取选中的值，然后根据这个值来更新第二个下拉框的选中项。

HTML 结构

首先，我们需要定义两个下拉框的 HTML 结构。为了方便操作，我们为每个下拉框添加唯一的 id，并使用 data-target 属性来指定目标下拉框的 id。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="cars1">选择车辆 1:</label>
<select name="cars1" id="cars1" data-target="cars2">
  <option value="">请选择</option>
  <option value="volvo">沃尔沃</option>
  <option value="saab">萨博</option>
  <option value="mercedes">梅赛德斯</option>
  <option value="audi">奥迪</option>
</select>

<br><br>

<label for="cars2">选择车辆 2:</label>
<select name="cars2" id="cars2" data-target="cars1">
  <option value="">请选择</option>
  <option value="volvo">沃尔沃</option>
  <option value="saab">萨博</option>
  <option value="mercedes">梅赛德斯</option>
  <option value="mclaren">迈凯伦</option>
</select>

jQuery 代码

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

$(document).ready(function(){

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

    // 检查目标下拉框中是否存在对应的选项
    var targetedValue = $('#'+selected_target+' option[value='+selectedValue+']').length > 0;

    // 选中当前下拉框的对应选项 (确保双向联动)
    $('#'+selected_select+' option[value='+selectedValue+']').prop('selected', true);

    // 如果目标下拉框存在对应选项，则选中，否则选中默认选项
    if(targetedValue === true) { 
      $('#'+selected_target+' option[value='+selectedValue+']').prop('selected', true);
    } else { 
      $('#'+selected_target+' option[value=""]').prop('selected', true);
    }
  });

});

这段代码首先使用 $(document).ready() 确保在 DOM 加载完成后执行。然后，它监听所有 select 元素的 change 事件。在事件处理函数中，它获取当前被选中的下拉框的 id 和选中的值。然后，它使用 data-target 属性获取目标下拉框的 id。

卡拉OK视频制作

卡拉OK视频制作，在几分钟内制作出你的卡拉OK视频

178

查看详情

关键部分是 var targetedValue = $('#'+selected_target+' option[value='+selectedValue+']').length > 0; 这行代码。它检查目标下拉框中是否存在与当前选中值相匹配的选项。如果存在，则 targetedValue 为 true，否则为 false。

最后，根据 targetedValue 的值，代码决定是在目标下拉框中选择对应的选项，还是选择默认选项（value="" 的选项）。

代码解释

• $(document).ready(function(){ ... });：确保在文档加载完成后执行代码。
• $('select').on('change', function() { ... });：监听所有 select 元素的 change 事件。
• $(this).attr('id')：获取当前触发事件的 select 元素的 id 属性值。
• $(this).attr('data-target')：获取当前触发事件的 select 元素的 data-target 属性值。
• $(this).val()：获取当前选中的 option 元素的 value 属性值。
• $('#'+selected_target+' option[value='+selectedValue+']').length > 0：检查目标下拉框中是否存在 value 属性为 selectedValue 的 option 元素。如果存在，返回大于 0 的值，否则返回 0。
• $('#'+selected_target+' option[value='+selectedValue+']').prop('selected', true)：将目标下拉框中 value 属性为 selectedValue 的 option 元素设置为选中状态。
• $('#'+selected_target+' option[value=""]').prop('selected', true)：将目标下拉框中 value 属性为空字符串的 option 元素设置为选中状态（即默认选项）。

注意事项

• 确保引入 jQuery 库。
• data-target 属性的值必须与目标下拉框的 id 属性值一致。
• 默认选项的 value 属性应该为空字符串。

总结

通过使用 jQuery，我们可以轻松实现联动下拉框的功能。通过监听 change 事件并根据选中的值更新目标下拉框的选中项，我们可以提供更好的用户体验。同时，针对选项不完全一致的情况，我们通过检查目标下拉框中是否存在对应选项，并选择默认选项，保证了功能的健壮性。

以上就是联动下拉框：当一个下拉框选项被选择时，如何联动选择另一个下拉框的特定选项的详细内容，更多请关注php中文网其它相关文章！