jquery地区选择三级联动

无意间发现以前自己写的地区选择的三级联动，虽然现在都是用插件做的，但是jquery手写的还是可以了解一下，看看就好。

首先是要引入jquery和全国地区列表文件，可以自己下载一个，我的GitHub上有 https://github.com/leileibrother/selectArea

全部代码如下：

<script src="jquery-1.11.3.js"></script>
<script src="city.js"></script>

1，html代码

<div>
    <h1>三级联动</h1>
    <select id="province">
        <option value="省">省</option>
    </select>
    <select id="city">
        <option value="市">市</option>
    </select>
    <select id="country">
        <option value="县">县</option>
    </select>
</div>

2，先循环出所有的省或者直辖市，添加到页面上

var allCity = city.citylist;
$.each(allCity,function(i,n){
    //添加每一个省
    $("#province").append('<option value="'+ n.p +'">' + n.p + '</option>');
});

3，每次选择省的时候，循环出省下面的市或区

$("#province").change(function(){
    $("#country").show();
    //执行后面函数之前清空一下
    $("#city").html('<option value="市">市</option>');
    $("#country").html('<option value="县">县</option>');
    $.each(allCity,function(i,n){
        if($("#province").val()==n.p){
            $.each(n.c,function(a,b){
                //添加每一个市
                $("#city").append('<option value="'+ b.n + '">' + b.n + '</option>');
            });
        }
    });
});

4，每次选择市区的时候，循环出市下面的县，直辖市下只有区，没有县。

$("#city").change(function(){
    //执行后面函数之前清空一下
    $("#country").html('<option value="县">县</option>');
    $.each(allCity,function(i,n){
        if($("#province").val()==n.p){
            $.each(n.c,function(a,b){
                if($("#city").val()==b.n){
                    if(b.a){//判断有没有县，有就显示，没有就隐藏
                        $.each(b.a,function(c,d){
                            //添加每一个县
                            $("#country").append('<option value="'+ d.s + '">' + d.s + '</option>');
                        })
                    }else{
                        $("#country").hide();
                    }
                }
            });
        }
    });
});

jquery地区选择三级联动

猜你喜欢