<!DOCTYPE html>
<html>
<!-- 城市列表专用可扩展查邮编，区号 -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>城市列表</title>
<link href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
</style>
</head>
<body>
<div>
省份：
<select id='myProvince'>
<option>-请选择省份-</option>
<option v-for='province in provinceList' v-bind:value='province.id'>{{province.name}}</option>
</select>
<br> 城市：
<select id='myCity'>
<option>-请选择城市-</option>
<option v-for='city in cityList' v-bind:value='city.id'>{{city.name}}</option>
</select>
<br> 县/区：
<select id='myDistrict'>
<option>-请选择县/区-</option>
<option v-for='district in districtList' v-bind:value='district.id'>{{district.name}}</option>
</select>
</div>
<script src="http://cdn.bootcss.com/vue/1.0.28/vue.js"></script>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script type="text/javascript">
var myProvince = new Vue({
el: "#myProvince",
data: {
provinceList: []
}
});
var myCity = new Vue({
el: "#myCity",
data: {
cityList: []
}
})
var myDistrict = new Vue({
el: "#myDistrict",
data: {
districtList: []
}
})
var parentid = 0;
var url = 'http://api.jisuapi.com/area/query?parentid=' + parentid + '&appkey=a862ded1133c3f89';
getProvinceData(url, parentid);
function getProvinceData(url, parentid) {
$.ajax({
url: url,
type: 'get',
dataType: 'jsonp',
success: function(data) {
if (data.status == parentid) {
var dataArr = data.result;
var provinceArr = [];
var provinceJson = {}
for (var i = 0; i < dataArr.length; i++) {
if (dataArr[i].parentid == parentid) {
provinceJson[i] = {
id: dataArr[i].id,
name: dataArr[i].name,
areacode: dataArr[i].areacode,
zipcode: dataArr[i].zipcode,
}
provinceArr.push(provinceJson[i])
// provinceIdArr.push(dataArr[i].cityid)
}
}
console.log(provinceArr)
// console.log(provinceIdArr)
myProvince.provinceList = provinceArr;
myProvince.$nextTick(function() {
var select = document.getElementsByTagName('select');
select[0].onchange = function() {
var cityid = select[0].value;
var parentid = cityid;
var url = 'http://api.jisuapi.com/area/query?parentid=' + parentid + '&appkey=a862ded1133c3f89';
getCityData(url, parentid)
}
})
}
}
})
}
//获取城市列表
function getCityData(url, parentid) {
console.log(url)
$.ajax({
url: url,
type: 'get',
dataType: 'jsonp',
success: function(data) {
if (data.status == '0') {
var dataArr = data.result;
var cityArr = [];
var cityJson = {}
console.log(dataArr.length); //2595
for (var i = 0; i < dataArr.length; i++) {
console.log(parentid)
console.log(dataArr[i].parentid)
if (dataArr[i].parentid == parentid) {
console.log(dataArr[i].name)
cityJson[i] = {
id: dataArr[i].id,
name: dataArr[i].name,
areacode: dataArr[i].areacode,
zipcode: dataArr[i].zipcode,
}
console.log(cityJson[i])
cityArr.push(cityJson[i])
}
}
console.log(cityArr)
myCity.cityList = cityArr;
myCity.$nextTick(function() {
var select = document.getElementsByTagName('select');
// alert(aOption.length)
// alert(aOption[0].value)
select[1].onchange = function() {
var cityid = select[1].value;
// alert(cityid)
var parentid = cityid;
var url = 'http://api.jisuapi.com/area/query?parentid=' + parentid + '&appkey=a862ded1133c3f89';
console.log(parentid)
getDistrictData(url, parentid)
}
})
}
}
})
}
function getDistrictData(url, parentid) {
$.ajax({
url: url,
type: 'get',
dataType: 'jsonp',
success: function(data) {
if (data.status == '0') {
var dataArr = data.result;
var districtArr = [];
var districtJson = {}
console.log(dataArr.length); //2595
for (var i = 0; i < dataArr.length; i++) {
// console.log(dataArr[i].parentid)
if (dataArr[i].parentid == parentid) {
console.log(dataArr[i].name)
// alert(1)
districtJson[i] = {
id: dataArr[i].id,
name: dataArr[i].name,
areacode: dataArr[i].areacode,
zipcode: dataArr[i].zipcode,
}
console.log(districtJson[i])
districtArr.push(districtJson[i])
}
}
console.log(districtArr)
myDistrict.districtList = districtArr;
// myCity.$nextTick(function() {
// var select = document.getElementsByTagName('select');
// // alert(aOption.length)
// // alert(aOption[0].value)
// select[1].onchange = function() {
// var cityid = select[1].value;
// alert(cityid)
// var parentid = cityid;
// console.log(parentid)
// }
// })
}
}
})
}
</script>
</body>
</html>
网友评论