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

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

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

实现原理

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

具体步骤

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

   

   卡拉OK视频制作

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

   178

   查看详情

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

   登录后复制

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 事件，并判断目标下拉框中是否存在对应选项，从而实现联动效果，并处理目标下拉框中不存在该选项的情况。

以上就是根据一个下拉框的选择动态控制另一个下拉框的选项的详细内容，更多请关注php中文网其它相关文章！