简单的地区联动

简单的地址联动,没做其他判断,做一个尝试吧

<!DOCTYPE html>
<html>
<head>
    <title>ajax</title>
      <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
    <div>
        <select id="selectTest">
            <option value="">--请选择--</option>
        </select>
        <select id="areaList">
            <option value="">--请选择--</option>
        </select>

        <select id="cityList">
            <option value="">--请选择--</option>
        </select>
    </div>
</body>


<script src="js/jquery-2.1.4.js"></script>
<script type="text/javascript">
    var baseurl = "https://csshoptest.wechat.bshg.com.cn/appointment_repair";
    var url = baseurl + "/area/getAreaJson";
    var addrlist = [];//省
    var arealist = [];//市
    var citylist = [];//区
    $.ajax({
        url:url,
        type:"post",
        dataType:"json",
        success:function(data){
            console.log(data);
            addrlist = data.data;
            $.each(data.data,function(index,elem){
                $("#selectTest").append("<option value="+index+">" + elem.name+"</option>")
            })
        },
        error:function(){
            console.log(错误)
        }
    })

    $("#selectTest").on("change",function(){
        $("#areaList").html("");
        $("#areaList").append("<option>" + "--请选择--"+"</option>");
        var provinceCode = $(this).val();
        console.log("改变"+provinceCode);
        arealist = addrlist[provinceCode].sub;
        $.each(arealist,function(index,elem){
            $("#areaList").append("<option value="+index+">" + elem.name+"</option>")
        })
    })

    $("#areaList").on("change",function(){
        $("#cityList").html("");
        $("#cityList").append("<option>" + "--请选择--"+"</option>");
        var cityCode = $(this).val();
        console.log("改变"+cityCode);
        citylist = arealist[cityCode].sub;
        $.each(citylist,function(index,elem){
            $("#cityList").append("<option value="+index+">" + elem.name+"</option>")
        })
    })



</script>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 当我睁开眼睛的时候,吓了一跳,一个浓眉凤眼姿容妍丽的妇人在焦急地凝视着我,不,确切地说,是一群人,一群古装美人,都...
    石头精阅读 686评论 0 2
  • 搅乱一池清水的不是风,而是食物。 炎炎夏日午后,无一处可避暑。 五岁的妞妞在公园水榭边喂锦...
    荷香流韵阅读 283评论 0 1
  • “全身心地投入一件事情,周遭的世界就像消失了一样,你会忘记时间,忘记吃饭,忘记刷手机,只是一门心思扑在这件事儿上。...
    放放的随笔杂谈阅读 156评论 0 0