侧边栏壁纸
博主头像
coydone博主等级

记录学习,分享生活的个人站点

  • 累计撰写 306 篇文章
  • 累计创建 51 个标签
  • 累计收到 0 条评论

目 录CONTENT

文章目录

省市县三级联动

coydone
2022-02-02 / 0 评论 / 0 点赞 / 321 阅读 / 2,344 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-09,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

使用JQuery和Ajax的形式实现省市县三级联动

所需资源

JQuery:jquery-1.8.3.min.js

全国城市的JSON数据:city.json

创建目录结构

-demo   工程名
    --js    目录
        ---jquery-1.8.3.min.js  jQuery依赖
    --data 目录
        ---city.json  城市的json数据
    --index.html

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>三级联动</title>
    </head>
    <body>
        <select name="" id="province">
            <option value="">----请选择省份----</option>
        </select>
        <select name="" id="city">
            <option value="">----请选择城市----</option>
        </select>
        <select name="" id="area">
            <option value="">----请选择地区----</option>
        </select>
        <script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
        <script>
            //所有的数据
            var allData;
            var province;//省份
            //某个省份下当个城市
            var city;
            var areas;
            $.ajax({
                url:"data/city.json",
                dataType:"json",
                type:"GET",
                success:function(data){
                    allData = data.city;
                    //console.log(allData);
                    for (var i = 0; i < allData.length; i++) {
                        //遍历json中的省份,将数据写入第一个省份的下拉列表中
                        province = allData[i].name;
                        $("#province").append("<option>"+province+"</option>");
                    }
                }
            });
            //给第一个省份下拉列表添加change事件
            $("#province").change(function(){
                //移除之前选择的数据
                $("#city").children().not(":first").remove();
                //让area处于默认状态
                //移除之前选择的数据
                $("#area").children().not(":first").remove();
                //this.value表示当前改变的下拉框的值
                for (var i = 0; i < allData.length; i++) {
                    province = allData[i].name;
                    //如果当前下拉列表的值与city中省份的值一样,则在第二个下拉框中显示其省份的城市
                    if(this.value==province){
                        //allData[i].city表示所有的city数组
                        for (var j = 0; j < allData[i].city.length; j++) {
                            //获取指定省份的单个城市name
                            city = allData[i].city[j].name;
                            $("#city").append("<option>"+city+"</option>");
                        }   
                    }
                }
            });
            //给第二个城市下拉列表添加change事件
            $("#city").change(function(){
                for (var i = 0; i < allData.length; i++) {
                    for (var j = 0; j < allData[i].city.length; j++) {
                        city = allData[i].city[j].name;
                        //allData[i].city[j].area表示当前城市的所有地区
                        areas = allData[i].city[j].area;
             
                        if(this.value==city){
                            for (var k = 0; k < areas.length; k++) {
                                //console.log(areas[k]);
                                $("#area").append("<option>"+areas[k]+"</option>");
                            }
                        }                       
                    }
                }
            });
        </script>
    </body>
</html>

效果

0

评论区