介绍与原理：二级联动下拉框又叫做联动菜单，这是一个比较常见功能，在网上买东西填写地址的时候，还有一些个人信息的时候都有见到。原理就是当你选择好第一个下拉框的时候就会触发一个事件将第二个下拉框的内容改变称为与之相对应的内容，二级联动，以及更多的多级联动的原理都是一样，代码量会更多，但原理一样。

 

解析：要实现这个小功能我这里用到了jQuery里的click单击事件，还有each遍历函数，源代码在文末，看起来挺多的，但要用到的知识点却不多，认真看你会发现大部分都是类似的

在实现这个功能前用each遍历函数建立一个动态生成的内容作为第一个下拉框的选择内容，

var arr = ["广东", "四川", "湖北", "山东", "湖南", "黑龙江"];

$.each(arr,function(index,item){

    $("#inputGroupSelect01").append('<option value='+index+'>'+item+'</option>');

});

});

就这样就设置好第一个下拉框了，接下来在设置联动之前还有设置与第一个下拉框相对应的下拉框内容，方法一样我就不多说了（文末有源代码可参考）。

 

难点：接下来就是设置一个触发事件，可以是点击事件或者失去焦点事件，只要能触发第二个下拉框就行，在我这里设置的是一个单击事件：

$(".aa").click(function(){  //建立单击事件
var ss=$(".custom-select").val();  //获取第一个下拉框所选内容
$("#dd").removeClass();  //清除第二个下拉框的类名
$("#dd").empty();    //清除第二个下拉框前一次内容（清除子节点）
$("#dd").addClass('col inputGroupSelect'+ss+'')  //设置第二个下拉框的类名
})

 

设置完成并成功的结果，如图：

                     

jquery 多级菜单联动 jquery下拉框二级联动_jquery 多级菜单联动

      

jquery 多级菜单联动 jquery下拉框二级联动_下拉框_02

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>二级联动菜单</title>
</head>
<link rel="stylesheet" href="../插件/bootstrap.min.css">
<body>
<div class="container">
<div class="input-group">
<select class="custom-select aa col" id="inputGroupSelect01">
<option selected>...</option>
</select>
<select id="dd" class="col">
<option selected></option>
</select>
</div>
</div>
<script src="../插件/jquery-3.4.1.min.js"></script>
<script src="../插件/bootstrap-4.5.0-dist/js/bootstrap.bundle.min.js"></script>
<script>
$(function(){
var arr = ["广东", "四川", "湖北", "山东", "湖南", "黑龙江"];
$.each(arr,function(index,item){
$("#inputGroupSelect01").append('<option value='+index+'>'+item+'</option>');
});
});
$(".aa").click(function(){
var ss=$(".custom-select").val();
$("#dd").removeClass();
$("#dd").empty();
$("#dd").addClass('col inputGroupSelect'+ss+'')
var arr0 = ["广州市","深圳市","珠海市","汕头市","佛山市","韶关市","湛江市","肇庆市","江门市","茂名市","惠州市","梅州市","汕尾市","河源市","阳江市","清远市","东莞市","中山市","潮州市","揭阳市","云浮市","..."];
$.each(arr0,function(index,item){
$(".inputGroupSelect0").append('<option selected>'+item+'</option>');
});
var arr1 = ["成都市","绵阳市","德阳市","攀枝花市","遂宁市","南充市","广元市","乐山市","宜宾市","泸州市","达州市","广安市","巴中市","雅安市","内江市","自贡市","资阳市","眉山市","..."];
$.each(arr1,function(index,item){
$(".inputGroupSelect1").append('<option selected>'+item+'</option>');
});
var arr2 = ["武汉市","黄石市","十堰市","荆州市","宜昌市","襄阳市","鄂州市","荆门市","孝感市","黄冈市","咸宁市","随州市","..."];
$.each(arr2,function(index,item){
$(".inputGroupSelect2").append('<option selected>'+item+'</option>');
});
var arr3 = ["济南市","青岛市","淄博市","枣庄市","东营市","烟台市","潍坊市","济宁市","泰安市","威海市","日照市","滨州市","德州市","聊城市","临沂市","菏泽市","莱芜市","..."];
$.each(arr3,function(index,item){
$(".inputGroupSelect3").append('<option selected>'+item+'</option>');
});
var arr4 = ["长沙市","株洲市","湘潭市","衡阳市","邵阳市","岳阳市","常德市","张家界市","益阳市","娄底市","郴州市","永州市","怀化市","..."];
$.each(arr4,function(index,item){
$(".inputGroupSelect4").append('<option selected>'+item+'</option>');
});
var arr5 = ["哈尔滨市","齐齐哈尔市","牡丹江市","佳木斯市","七台河市","大庆市","黑河市","绥化市","伊春市","鹤岗市","双鸭山市","鸡西市","..."];
$.each(arr5,function(index,item){
$(".inputGroupSelect5").append('<option selected>'+item+'</option>');
});
})
</script>
</body>
</html>