JS-省市县三级联动

来源：互联网发布：xml json yaml 编辑：程序博客网时间：2024/05/17 04:20

<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下载

0 0