Jquery与AJAX实现三级联动总结

原创 2018-11-10 14:38:32 8
摘要:通过本课程的学习,了解了通过AJAX异步请求数据的方法,学会了无刷新页面实现数据的异步加载,通过练习,对异步加载的方法进一步加深练习,也实现了三级联动和获取三级联动选择内容的功能。代码如下:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl

通过本课程的学习,了解了通过AJAX异步请求数据的方法,学会了无刷新页面实现数据的异步加载,通过练习,对异步加载的方法进一步加深练习,也实现了三级联动和获取三级联动选择内容的功能。代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax实现省市级联</title>
<script src="jquery.js"></script>
</head>
<body>
<label for="pro">省份:</label>
<select name="pro" id="pro"></select>
<label for="city">所在城市:</label>
<select name="city" id="city"></select>
<label for="area">所在地区:</label>
<select name="area" id="area"></select>

<p id="contentP"></p>

<script type="text/javascript">

    var valP="";  //存放p标签内容的变量

//获取省份
$.ajax({
            type: 'post',   //post请求
            url: '1.json',   // 请求地址
            data: '',
            dataType: 'json',
            success: function(data) {
             //console.log(data);
                let options='<option value="0">请选择<option>';
                $.each(data,function(i){
                 options+='<option value="'+data[i].proId+'">'+data[i].proName+'<option>'
                });
                //console.log(options);
                

                $("#pro").html(options);

                $("option:not([value])").remove();


            }
    });

    $("#pro").change(function(){


        //console.log($(this).val());
        
        let proID=$(this).val();

        if(proID!="0"){
            valP="您选择了:"+$(this).find(":selected").text()+"省";
            $('#contentP').html(valP);
        }
        else   //选择了“请选择”
        {
            //清空所有数据
            valP="";
            $('#contentP').html(valP);//清空选择内容
            $('#city').html(valP);//清空城市
            $('#area').html(valP);//清空地区
            return;  //不要继续加载城市
        }

        $.ajax({
            type: 'post',   //post请求
            url: '2.json',   // 请求地址
            data: '',
            dataType: 'json',
            success: function(data) {
                //console.log(data);
                let options='<option value="0">请选择<option>';
                $.each(data,function(i){
                    if(data[i].proId==proID)
                    {
                        options+='<option value="'+data[i].cityId+'">'+data[i].cityName+'<option>'
                    }
                });
                //console.log(options);

                $("#city").html(options);

                $("option:not([value])").remove();

            }
        });
    });

    $("#city").change(function(){


        let cityID=$(this).val();

        if(cityID!="0")
        {
            //如果已经选择过市,则做替换操作
            if(valP.indexOf("市") >= 0 )
            {
                //console.log(valP.substr(0,valP.lastIndexOf("省")+1));  //只取到省份
                valP=valP.substr(0,valP.lastIndexOf("省")+1)+$(this).find(":selected").text()+"市";
                $('#contentP').html(valP);
            }
            else
            {
                valP+=$(this).find(":selected").text()+"市";
                $('#contentP').html(valP);
            }
        }
        else   //选择了“请选择”
        {
            //只取到省份
            valP=valP.substr(0,valP.lastIndexOf("省")+1);
            $('#contentP').html(valP);

            $('#area').html(valP);//清空地区
            return;  //不要继续加载地区
        }

        $.ajax({
            type: 'post',   //post请求
            url: '3.json',   // 请求地址
            data: '',
            dataType: 'json',
            success: function(data) {
                //console.log(data);
                let options='<option value="0">请选择<option>';
                $.each(data,function(i){
                    if(data[i].cityId==cityID)
                    {
                        options+='<option value="'+data[i].areaId+'">'+data[i].areaName+'<option>'
                    }
                });
                //console.log(options);

                $("#area").html(options);

                $("option:not([value])").remove();
            }
        });

    });

    $("#area").change(function(){
        let areaID=$(this).val();

        if(areaID!="0")
        {
            //如果已经选择过市,则做替换操作
            if(valP.indexOf("区") >= 0 )
            {
                //console.log(valP.substr(0,valP.lastIndexOf("省")+1));  //只取到城市
                valP=valP.substr(0,valP.lastIndexOf("市")+1)+$(this).find(":selected").text();
                $('#contentP').html(valP);
            }
            else
            {
                valP+=$(this).find(":selected").text();
                $('#contentP').html(valP);
            }
        }
        else   //选择了“请选择”
        {
            //只取到城市
            valP=valP.substr(0,valP.lastIndexOf("市")+1);
            $('#contentP').html(valP);

            $('#area').html(valP);//清空地区
        }
    });

    </script>
</body>
</html>

对应的1.json

[
  {
    "proId": 1,
    "proName": "安徽"
  },
  {
    "proId": 2,
    "proName": "江苏"
  }
]

对应的2.json

[
  {
    "cityId": 1,
    "cityName": "合肥",
    "proId":1
  },
  {
    "cityId": 2,
    "cityName": "芜湖",
    "proId":1
  },
  {
    "cityId": 3,
    "cityName": "南京",
    "proId":2
  },
  {
    "cityId": 4,
    "cityName": "苏州",
    "proId":2
  }
]

对应的3.json

[
  {
    "areaId": 1,
    "areaName": "包河区",
    "cityId": 1
  },
  {
    "areaId": 2,
    "areaName": "蜀山区",
    "cityId": 1
  },
  {
    "areaId": 3,
    "areaName": "镜湖区",
    "cityId": 2
  },
  {
    "areaId": 4,
    "areaName": "弋江区",
    "cityId": 2
  },
  {
    "areaId": 5,
    "areaName": "玄武区",
    "cityId": 3
  },
  {
    "areaId": 6,
    "areaName": "六合区",
    "cityId": 3
  },
  {
    "areaId": 7,
    "areaName": "吴江区",
    "cityId": 4
  },
  {
    "areaId": 8,
    "areaName": "昆山市",
    "cityId": 4
  }
]


代码实现如上。另,实现中有个小问题,如异步获取省份时,每次拼接到的options,打印到控制台的时候,是没有包含空的“<option></option>”,但是通过加载到页面的方法:$("#pro").html(options);时,就会多拼接两个“<option></option>”,后面找不到问题,只能通过$("option:not([value])").remove();去掉空白的option。麻烦老师帮忙看看是什么问题导致会多出两个“<option></option>”,谢谢。


老师辛苦了!

批改老师:韦小宝批改时间:2018-11-10 15:02:53
老师总结:那可不多了一对option嘛,你那里拼接的时候多出来的吧!你把自己的代码好好看看! 总的来说的写的很不错啦!加油吧!!!

发布手记

热门词条