JS-省市县三级联动

最新推荐文章于 2019-05-20 16:23:14 发布

不是咸鱼是鱼干

最新推荐文章于 2019-05-20 16:23:14 发布

阅读量358

点赞数

分类专栏：小零碎

小零碎专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<div>
    <h1>全国省市县三级联动</h1>
    <select id="province">
        <option value="省份（市）">省份（市）</option>
    </select>
    <select id="city">
        <option value="市（区）">市（区）</option>
    </select>
    <select id="county">
        <option value="县、镇">县、镇</option>
    </select>
</div>

需要链接jquery库，和city.js

<script>
    var cityAll=city.citylist;
    $.each(cityAll,function(i,n){
        $("#province").append('<option value="'+ n.p + '">' + n.p + '</option>');
    });
    $("#province,#city").change(function(){
        if($(this).attr("id") == "province"){
            $("#city").html("").append('<option value="市（区）">市（区）</option>').next().html("").append('<option value="县、镇">县、镇</option>');
        }else{
            $("#county").html("").append('<option value="县、镇">县、镇</option>');
        }
        $.each(cityAll,function(j,k){
            if($("#province").val() == k.p){
                $.each(k.c,function(l,m){
                    $("#city").append('<option value="'+ m.n + '">' + m.n + '</option>');
                    if(m.a){
                        $("#county").show();
                        if($("#city").val() == m.n){
                            $.each(m.a,function(e,f){
                                $("#county").append('<option value="'+ f.s + '">' + f.s + '</option>');
                            });
                        }
                    }else{
                        $("#county").hide();
                    }
                });
            }
        });
    });
</script>

百度云： demo下载