简单的地区联动
2018-06-12 本文已影响0人
努力努力再努力_g
简单的地址联动，没做其他判断，做一个尝试吧
<!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>
