当前位置：首页 > 文章列表 > 文章 > 前端 > 联动下拉框：如何实现选中一个控制另一个

联动下拉框：如何实现选中一个控制另一个

2025-08-01 17:27:33 0浏览收藏

想要实现网页上的联动下拉框效果吗？本文将详细介绍如何使用 jQuery 轻松实现两个下拉框的联动，一个下拉框的选择可以动态控制另一个下拉框的选项。针对实际应用中选项不完全一致的情况，我们提供了一种巧妙的解决方案：当第一个下拉框选择了第二个下拉框中不存在的选项时，程序将自动把第二个下拉框设置为默认选项，确保用户体验的友好性。文章包含完整的 HTML 结构和 jQuery 代码示例，并对关键代码进行详细解释，助你快速掌握联动下拉框的实现技巧，提升 Web 开发效率。无论是电商网站的商品筛选，还是表单中的地址选择，联动下拉框都能有效提升用户操作效率和数据准确性。

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

本文介绍了如何使用 jQuery 实现两个联动下拉框，当一个下拉框的选项被选中时，自动更新另一个下拉框的选择。针对选项不完全一致的情况，提供了当第一个下拉框选择了第二个下拉框不存在的选项时，自动将第二个下拉框设置为默认选项的解决方案。通过详细的代码示例和解释，帮助开发者轻松实现联动下拉框功能。

在 Web 开发中，联动下拉框是一种常见的交互模式，它可以根据一个下拉框的选择动态地改变另一个下拉框的选项或选择。本文将介绍如何使用 jQuery 实现两个联动下拉框，并解决当一个下拉框选择了另一个下拉框不存在的选项时，如何自动选择默认选项的问题。

HTML 结构

首先，我们需要创建两个下拉框的 HTML 结构。为了方便 jQuery 选择器操作，我们为每个下拉框添加了唯一的 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>
&lt;select name=&quot;cars1&quot; id=&quot;cars1&quot; data-target=&quot;cars2&quot;&gt;
  <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>
&lt;/select&gt;

<br><br>

<label for="cars2">Choose a car:</label>
&lt;select name=&quot;cars2&quot; id=&quot;cars2&quot; data-target=&quot;cars1&quot;&gt;
  <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>
&lt;/select&gt;

在这个例子中，cars1 下拉框的 data-target 属性设置为 cars2，表示它与 cars2 下拉框联动。同样，cars2 下拉框的 data-target 属性设置为 cars1，表示它与 cars1 下拉框联动。注意两个select标签都包含一个value为空的option，作为默认选项。

jQuery 代码

接下来，我们使用 jQuery 监听下拉框的 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);
      }
  });

});

这段代码首先获取当前被选中的下拉框的 ID 和它 data-target 属性指定的目标下拉框的 ID，以及当前选中的选项的值。然后，它检查目标下拉框中是否存在与当前选中选项值相同的选项。如果存在，则将目标下拉框的对应选项设置为选中状态；否则，将目标下拉框的默认选项（value 为空的选项）设置为选中状态。

代码解释：

$(document).ready(function(){ ... });：确保在文档加载完成后执行 jQuery 代码。
$('select').on('change', function() { ... });：监听所有 select 元素的 change 事件。
$(this).attr('id')：获取当前被选中的下拉框的 ID。
$(this).attr('data-target')：获取当前被选中的下拉框的 data-target 属性值，即目标下拉框的 ID。
$(this).val()：获取当前选中的选项的值。
$('#'+selected_target+' option[value='+selectedValue+']').length > 0：判断目标下拉框中是否存在与当前选中选项值相同的选项。length > 0 表示存在，否则不存在。
$('#'+selected_target+' option[value='+selectedValue+']').prop('selected', true);：将目标下拉框中与当前选中选项值相同的选项设置为选中状态。
$('#'+selected_target+' option[value=""]').prop('selected', true);：将目标下拉框的默认选项设置为选中状态。