三级联动省市县下拉菜单实现效果

<div class="dropdown btn-group" id="province">
    <button class="btn btn-default dropdown-toggle">
        <span>span> 
    button>
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <span class="caret">span>
    button>
    <ul class="dropdown-menu">
 
    ul>
div>

<div class="dropdown btn-group" id="city">
    <button class="btn btn-default dropdown-toggle">
        <span>span> 
    button>
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <span class="caret">span>
    button>
    <ul class="dropdown-menu">
 
    ul>
div>

<div class="dropdown btn-group" id="county">
    <button class="btn btn-default dropdown-toggle">
        <span>span> 
    button>
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <span class="caret">span>
    button>
    <ul class="dropdown-menu">
 
    ul>
div>

/* 
    1、清除默认的里面的所有li
    2、根据数组创建li列表放在ul中
    3、当点击每个a时，将span内容变化点击a的内容，并且抛发事件
    4、默认初始化列表后将第0个元素内容放在上面显示，并且抛发内容

*/
(function(){
    $.fn.setMenu=function(arr){
        // 清空它里面的ul的所有子元素，并且将ul返回出来
        var ul=this.children("ul").empty();
        // 遍历数组，箭头函数目的保持可以使用this
        $.each(arr,(index,item)=>{
            // 根据传进来的数组内容区遍历创建多少个li放在ul中
            // 再创建超链接
            // 针对a超链接添加点击事件，箭头函数，指向被点击的元素
            // 当点击目标元素时，将点击的目标文本的内容显示在span标签元素进行显示
            $("
").appendTo(ul).append(""+item+"")
            .click(e=>{
                this.find("span").eq(0).text(e.target.textContent);
                // 将点击的目标对象文本内容抛发出去
                this.trigger("change",e.target.textContent);
            });
        })
        // 找后代第一个span元素将数组的第一项作为文本内容添加进去
        this.find("span").eq(0).text(arr[0]);
        // 针对this抛发事件
        this.trigger("change",arr[0]);
        return this;
    }
})();

// 加载json文件(各省、市、县数据)
$.getJSON("./city.json",function(data){
    // 将数据放入到数组中
    var arr=[];
    // 首先遍历数据，拿到省添加到数组中
    $.each(data,function(prop,item){
        arr.push(prop);
    });
    // 先侦听再抛发，否则抛早了收不到消息
    $("#province").on("change",function(e,text){
        setList(text,"#city",data)
    }).setMenu(arr);
})

// 选择哪个级别菜单
// 先设置省级菜单，生成后在设置市级菜单生成后再生成县级菜单
function setList(text,menu,data,str){
    var arr=[];
    // 当菜单是城市菜单时
    // 遍历各个省数组，将里面的元素也就是各个市添加到数组中
    if(menu==="#city"){
        $.each(data[text],function(prop,item){
            arr.push(prop);
        })
    }else{
        arr=data[text][str];
        if(!arr) return;
    }
    // 市级菜单侦听抛发事件改变内容
    $(menu).on("change",function(e,str){
        // 当menu是城市时，改变县内容，再次执行setList函数，改变区县内容
        if(menu==="#city"){
            setList(text,"#county",data,str)
        }
    }).setMenu(arr);
}