实现简单二级联动下拉框

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

 

解析：要实现这个小功能我这里用到了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();    //清除第二个下拉框前一次内容（清除子节点）<