根据一个下拉框的选择动态控制另一个下拉框的选项

本文介绍了如何实现两个下拉框之间的联动，当在一个下拉框中选择某个选项时，根据该选项是否存在于另一个下拉框中，动态地选择或设置另一个下拉框的选项。通过使用 jQuery 监听下拉框的 change 事件，并判断目标下拉框中是否存在对应选项，从而实现联动效果，并处理目标下拉框中不存在该选项的情况，提供了一种灵活且易于维护的解决方案。

在Web开发中，经常会遇到需要根据一个下拉框的选择，动态地控制另一个下拉框选项的情况。例如，一个下拉框列出所有汽车品牌，另一个下拉框列出对应品牌的车型。当用户选择某个汽车品牌时，车型下拉框应该自动选择或设置为默认选项，如果该品牌不存在于车型下拉框中。本文将介绍如何使用 jQuery 实现这种联动效果。

实现原理

核心思路是监听第一个下拉框的 change 事件，获取用户选择的值，然后在第二个下拉框中查找是否存在该值对应的选项。如果存在，则选中该选项；如果不存在，则选中默认选项（例如 "Please-Select"）。

具体步骤

1. HTML 结构: 首先，我们需要创建两个下拉框，并为它们分配唯一的 id 属性，以及 data-target 属性，用于指定目标下拉框的 id。

   

   AdsGo AI

   全自动 AI 广告专家，助您在数分钟内完成广告搭建、优化及扩量

   下载

   
   Choose a car:
   
       Please-Select
       Volvo
       Saab
       Mercedes
       Audi
   
   
   
   
   Choose a car:
   
       Please-Select
       Volvo
       Saab
       Mercedes
       McLaren
   

2. jQuery 代码: 接下来，使用 jQuery 监听 select 元素的 change 事件。在事件处理函数中，获取当前选中的值，并根据该值更新目标下拉框的选项。

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

   代码解释:

   • $(document).ready(function(){ ... }); 确保在 DOM 加载完成后执行代码。
   • $('select').on('change', function() { ... }); 监听所有 select 元素的 change 事件。
   • $(this).attr('id') 获取当前触发 change 事件的 select 元素的 id。
   • $(this).attr('data-target') 获取当前触发 change 事件的 select 元素的 data-target 属性值，该值指定了目标 select 元素的 id。
   • $(this).val() 获取当前选中的选项的值。
   • $('#'+selected_target+' option[value='+selectedValue+']').length > 0 检查目标 select 元素中是否存在值为 selectedValue 的 option 元素。如果存在，则 length 大于 0，targetedValue 为 true，否则为 false。
   • $('#'+selected_target+' option[value='+selectedValue+']').prop('selected', true); 如果目标 select 元素中存在值为 selectedValue 的 option 元素，则选中该 option。
   • $('#'+selected_target+' option[value=""]').prop('selected', true); 如果目标 select 元素中不存在值为 selectedValue 的 option 元素，则选中值为 "" 的 option 元素，通常作为默认选项。
   • $('#'+selected_select+' option[value='+selectedValue+']').prop('selected', true); 保持当前选择的select的值同步。

注意事项

• 确保引入 jQuery 库。
• 为每个下拉框设置唯一的 id 属性，并通过 data-target 属性指定目标下拉框的 id。
• 确保目标下拉框包含一个默认选项（例如 "Please-Select"），以便在源下拉框中选择的值不存在于目标下拉框时，可以选择默认选项。
• 可以根据实际需求修改代码，例如，可以根据不同的选项值，设置不同的默认选项。

总结

通过本文介绍的方法，可以轻松实现两个下拉框之间的联动效果。这种方法具有灵活性和可维护性，可以方便地应用于各种 Web 开发场景中。通过监听 change 事件，并判断目标下拉框中是否存在对应选项，从而实现联动效果，并处理目标下拉框中不存在该选项的情况。