省市区三级联动

最新推荐文章于 2021-04-19 14:13:24 发布

樊小书生

最新推荐文章于 2021-04-19 14:13:24 发布

阅读量969

点赞数 2

分类专栏： jQuery 文章标签： css3 javascript jquery html

本文链接：https://blog.csdn.net/fxss5201/article/details/52093230

版权

jQuery 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

最近使用jquery代码编写了一个省市区三级联动，感兴趣的可以看看

如果想试试效果，可以去点击此处：点击测试

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉框</title>
<script src="city.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.js"></script>
<style>
*{
    margin: 0;
    padding: 0;
}
.sel {
    margin-top: 50px;
    margin-left: 20px;
    width: 120px;
    height: 25px;
    line-height: 25px;
    font-family: "微软雅黑";
    font-size: 14px;
}
</style>
</head>
<body>
<select class="sel" name="省/市" id="no1"></select>
<select class="sel" name="省/市" id="no2"></select>
<select class="sel" name="市/区" id="no3"></select>
<script>
function tab(options){
    // 由于添加的省市首个城市是北京，所以提前先将默认的北京市的区放到市下面区
    var citie = city.citylist[0].c,str1 = [];
    $(options.no3).hide();
    for(var i=0;i<citie.length;i++){
        var item = citie[i];
        str1.push('<option>'+item.n+'</option>');
    }
    $(options.no2).html(str1.join(""));
    // 提前将所有城市添加进去
    var cities = city.citylist,str2 = [];
    for(var i=0;i<cities.length;i++){
        var item = cities[i];
        str2.push('<option>'+item.p+'</option>');
    }
    $(options.no1).html(str2.join(""));
    // 判断左边的省市变化是，城市也跟着变化
    var number,numbe,cit;
    $(options.no1).change(function(){
        $(options.no2).show();
        if($(this).val()=="国外"){
            $(options.no2).hide();
            $(options.no3).hide();
        }else{
            for(var i=0;i<cities.length;i++){
                var sheng = cities[i].p;
                if(sheng==$(this).val()){
                    number = i;
                    break;
                }
            }
            cit = city.citylist[number].c;
            var str3 = [];
            for(var i=0;i<cit.length;i++){
                var item = cit[i];
                str3.push('<option>'+item.n+'</option>');
            }
            $(options.no2).html(str3.join(""));
            // 为省/市选中的添加第三个
            if(cit[0].a){
                $(options.no3).show();
                var citi = cit[0].a,str4 = [];
                for(var i=0;i<citi.length;i++){
                    var item = citi[i];
                    str4.push('<option>'+item.s+'</option>');
                }
                $(options.no3).html(str4.join(""));
            }else{
                $(options.no3).hide();
            }   
        } 
    });
    $(options.no2).change(function(){
        for(var i=0;i<cit.length;i++){
            var qu = cit[i].n;
            if(qu==$(this).val()){
                numbe = i;
                break;
            }
        }
        if(cit[numbe].a){
            $(options.no3).show();
            var ci = cit[numbe].a,str5 = [];
            for(var i=0;i<ci.length;i++){
                var item = ci[i];
                str5.push('<option>'+item.s+'</option>');
            }
            $(options.no3).html(str5.join(""));
        }else{
            $(options.no3).hide();
        }
    });
}
tab({
    no1 : "#no1",
    no2 : "#no2",
    no3 : "#no3"
});
</script>
</body>
</html>

如果需要整版的可以去

http://download.csdn.net/detail/fxss5201/9614321

进行下载查看