jquery --地区三级联动

　　闲的无聊，把以前写过的一个地区三级联动重写了一下

　　这是html部分

<div>
    <input id="provinces" type="text" name="省">
    <ul id="pContent">

    </ul>
</div>
<div>
    <input id="citys" type="text" name="市">
    <ul id="cContent">
        
    </ul>
</div>
<div>
    <input id="districts" type="text" name="区/县">
    <ul id="dContent">
         
    </ul>
</div>

　　主要使用input作为显示，ul是地区列表，外层div作为定位父级

　　看下样子

　　

　　很丑，确实很丑

　　有功能就可以了，要啥自行车啊！

　　接下来，看一下我们需要的数据格式

　　

　　

　　每个数据格式分为三个大数组，Aprovinces（省份），Acitys（城市），Adistricts（地区），数组当中的每一项，是一个json，name是这个地区的名字，id是这个地区的id，pid是这个地区的上级地区的id。（例如：河南的id是16，那么郑州的pid就是16）

　　下面是JS代码

　　

$(function(){
              function appendLi(arr,pid,id,ul){
                // 接受四个参数，
                // arr，一个是地区数据的数组
                // pid，父级地区的id，用来筛选
                // id ，对应要显示的input的id
                // 父级ul的dom id 
                var cStr = '';
                for(var i = 0 ; i < arr.length ; i++){
                    if (arr[i].pid == pid) {
                        cStr+='<li input_id="'+id+'" pid="'+arr[i].pid+'" id="'+arr[i].id+'">'+arr[i].name+'</li>';
                    }
                }
                ul.html(cStr);
            }

            appendLi(Aprovinces,1,'provinces',$('#pContent'));
            appendLi(Acitys,1,'citys',$('#cContent'));
            appendLi(Adistricts,1,'districts',$('#dContent'));

            $('ul').on('click',function(ev){
                var eve = ev || window.event;//获取事件对象
                var target = ev.target || ev.srcElement; //拿到target
                // 事件委托
                if(target.nodeName.toLocaleLowerCase() == 'li'){
                    // 获取当前点击元素，并判断是不是li
                    var _this = $(target);//转为jquery对象，并且赋值给this

                    //拿到这个li身上的id，地区名字，对应的ul id，对应的input id，对应的父级地区的pid
                    var name = _this.text();
                    var input_id = _this.attr('input_id');
                    var pid = _this.attr('id');
                    var ul_id = _this.parent().attr('id');
                    $('#'+input_id).attr('value',name);
                    //将当前点击的li的内容，修改到input的内容
                    switch (ul_id){
                        //判断当前点击的ul是 省 还是市（地区/县）不需要判断，因为不在有联动效果
                        case 'pContent':
                            //如果是省份
                            appendLi(Acitys,pid,'citys',$('#cContent')); 
                            //加载li到 市级里面，注意第一个参数，传入的市级的数组
                            var firstLi = $('#cContent li').first();
                            //添加市级li完毕之后，市级ul里面的第一个li
                            var firstLi_pid = firstLi.attr('id');
                            //将第一个li的id作为pid，在进行地区的循环
                            //形成三级联动的效果
                            appendLi(Adistricts,firstLi_pid,'districts',$('#dContent'));
                            break;
                        case 'cContent':
                            // 如果点击的是市级地区，
                            // 则直接创建县级地区
                            appendLi(Adistricts,pid,'districts',$('#dContent'));
                            break;
                        default:
                            break;
                    }
                }
                
                
            })

        })

　　　　就是这样