简单的地区联动

简单的地址联动，没做其他判断，做一个尝试吧
<!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>
简单的地区联动

推荐阅读更多精彩内容
