jquery 模块化（省市区三级联动）

利用input与ul列表结合实现自定义三级联动；

引入jquery与地区文件address.js

address.js的文件格式为

var provinceList = [{name:'北京', cityList:[
            {name:'北京市', areaList:['东城区','西城区','崇文区','宣武区','朝阳区','丰台区','石景山区','海淀区','门头沟区','房山区','通州区','顺义区','昌平区','大兴区','怀柔区','平谷区','密云县','延庆县']}
        ]},
    {name:'上海', cityList:[
            {name:'上海市', areaList:['黄浦区','卢湾区','徐汇区','长宁区','静安区','普陀区','闸北区','虹口区','杨浦区','闵行区','宝山区','嘉定区','浦东新区','金山区','松江区','青浦区','南汇区','奉贤区','崇明县']}
        ]},
    {name:'天津', cityList:[
            {name:'天津市', areaList:['和平区','河东区','河西区','南开区','河北区','红桥区','塘沽区','汉沽区','大港区','东丽区','西青区','津南区','北辰区','武清区','宝坻区','宁河县','静海县','蓟　县']}
        ]},
    {name:'重庆', cityList:[
            {name:'重庆市', areaList:['万州区','涪陵区','渝中区','大渡口区','江北区','沙坪坝区','九龙坡区','南岸区','北碚区','万盛区','双桥区','渝北区','巴南区','黔江区','长寿区','綦江县','潼南县','铜梁县','大足县','荣昌县','璧山县','梁平县','城口县','丰都县','垫江县','武隆县','忠　县','开　县','云阳县','奉节县','巫山县','巫溪县','石柱土家族自治县','秀山土家族苗族自治县','酉阳土家族苗族自治县','彭水苗族土家族自治县','江津市','合川市','永川市','南川市']}
        ]}]

<style>
    .container{
        font-size:0px;
    }
    .select{
        display: inline-block;
        position: relative;
    }
    input{
        height:30px;
        border-radius: 3px;
        border: solid 1px #000;
        -moz-appearance: none;
        text-align: center;
        cursor:pointer;
    }
    .list{
        position: absolute;
        top:35px;
    }
    #province{
        width:150px;
    }
    #city{
        width:150px;
    }
    #area{
        width:150px;
    }
    textarea{
        margin-top: 20px;
        box-sizing: border-box;
        width:600px;
        resize: none;
        padding: 10px;
    }
    ul{ 
        margin: 0;
        padding: 0;
        list-style: none;
        max-height:200px;
        overflow: auto;
        cursor:pointer;
        background: white;
        display: none;
        border:1px solid #e6e6e8;
        font-size: 14px;
    }
    #c1{
        width:150px;
        text-align:center;
    }
    #c1 li{
        margin:5px auto;
    }
    #c2{
        width:150px;
        text-align:center;
    }
    #c2 li{
        margin:5px auto;
    }
    #c3{
        width:150px;
        text-align:center;
    }
    #c3 li{
        margin:5px auto;
    }
</style>

<div class="container">
<div class="select">
    <input type="text" id="province" name="Province"  placeholder="请选择省" readonly>
    <div class="list">
        <ul id="c1"></ul>
    </div>
</div>
<div class="select">
    <input  type="text" id="city" name="City" placeholder="请选择市" readonly>
    <div class="list">
        <ul id="c2"></ul>
    </div>
</div>
<div class="select">
    <input type="text" id="area" name="Area" placeholder="请选择区" readonly>
    <div class="list">
        <ul id="c3"></ul>
    </div>
</div>
</div>

<script>
    var $li1='';
    var $li2='';
    var $li3='';
    var city;
    var area;
    $.each(provinceList,function (i,val) {
        $li1+="<li obj='"+i+"'>"+val.name+"</li>";
    });
    $("#c1").append($($li1));
    $("#province").click(function(){
        $("#c1").show();
        $("#c2").hide();
        $("#c3").hide();


    });
    $("#province").change(function(){
        $("#city").val("");
        $("#area").val("");
    })
    $("#city").click(function () {
        
        $("#c2").show();
        $("#c1").hide();
        $("#c3").hide();
    });
    $("#city").change(function(){
        $("#area").val("");
    })
    $("#area").click(function () {
        $("#c3").show();
        $("#c1").hide();
        $("#c2").hide();
    });

    $("#c1").on("click","li",function(){
        var i=$(this).attr("obj");
        city= provinceList[i].cityList;
        //取得值
        // alert(city[0].name);
        var text=$(this).text();
        if(text!=$("#province").val()){
            $("#province").val(text);
            $("#c1").hide();
            $("#c2").empty();
            $li2="";
            //添加节点
            $.each(city,function (i,val) {
                $li2+="<li obj='"+i+"'>"+val.name+"</li>";
            });
            $("#c2").append($($li2));
            $("#c2").show();
            $("#province").trigger("change");
        }else{
            $("#c1").hide();
        }
        
       
       
    });
    $("#c2").on("click","li",function(){
        var i=$(this).attr("obj");
        area=city[i].areaList;
        var text=$(this).text();
        if(text!=$("#city").val()){
            $("#city").val(text);

            $("#c2").hide();
            $("#c3").empty();
            $li3="";
            $.each(area,function(i,val){
                $li3+="<li>"+val+"</li>"
            });
            $("#c3").append($($li3));
            $("#c3").show();
            $("#city").trigger("change");
        }else{
            $("#c2").hide();
        }
    });
    $("#c3").on("click","li",function(){
        var text=$(this).text();
        $("#area").val(text);
        $("#c3").hide();
    });
</script>

 

 

//省市区文件可留言私传