当前位置：首页 > 文章列表 > 文章 > 前端 > 联动下拉框怎么实现？选一个自动匹配另一个

联动下拉框怎么实现？选一个自动匹配另一个

2025-08-15 13:27:27 0浏览收藏

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《联动下拉框：选中一个选项自动匹配另一个下拉框内容》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

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

本文介绍了如何实现两个下拉框的联动效果，即当在一个下拉框中选择某个选项时，自动在另一个下拉框中选择相应的选项。针对两个下拉框选项不完全相同的情况，提供了一种解决方案，使得在第一个下拉框中选择的选项如果不存在于第二个下拉框中，则自动选择第二个下拉框的默认选项。

在Web开发中，联动下拉框是一种常见的交互方式，它可以根据用户的选择动态地更新其他下拉框的选项，从而提高用户体验。本文将介绍如何使用jQuery实现两个下拉框的联动，并解决一个特殊情况：当第一个下拉框中选择的选项不存在于第二个下拉框中时，如何自动选择第二个下拉框的默认选项。

实现思路

核心思路是监听第一个下拉框的change事件，当事件触发时，获取选中的值，并在第二个下拉框中查找是否有与之匹配的选项。如果找到匹配的选项，则选中它；否则，选中第二个下拉框的默认选项。

代码实现

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


Choose a car:






Choose a car:

接下来，我们使用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);
      }
  });

});

这段代码首先使用$(document).ready()确保在DOM加载完成后执行。然后，使用$('select').on('change', function() { ... });来监听所有元素。

.attr('id'): 获取元素的id属性值。

.attr('data-target'): 获取元素的data-target属性值。

.val(): 获取

忘记密码

登录即同意用户协议和隐私政策

返回登录

重置密码