百度的AreaJSON
不知道百度的URL能不能一直能用
https://passport.baidu.com/js/sitedata_bas.js
demo效果图
demo效果图
demo下载地址
密码:tpqb
html参考例子
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 百度的链接不知道会不会一直能用 -->
<script type="text/javascript" src="https://passport.baidu.com/js/sitedata_bas.js" charset="GBK"></script>
<!-- <script type="text/javascript" src="arrCity.js" charset="utf-8"></script> -->
</head>
<body>
<select id="a" onchange="functionA()"></select>
<select id="b" onchange="functionB()"></select>
<select id="c" hidden="hidden"></select>
</body>
<script language="JavaScript">
var arrCity = arrCity;//省份或者直辖市
var b = []; //二级城市
var selectA = document.getElementById("a");
var selectB = document.getElementById("b");
var selectC = document.getElementById("c");
for(var i = 0; i < arrCity.length; i++) {
var option = "<option value='" + i +"'>" + arrCity[i].name + "</option>";
selectA.innerHTML = selectA.innerHTML + option;
}
function functionA() {
selectC.setAttribute("hidden", "hidden");
var value = selectA.value;
b = arrCity[value].sub;//获取二级城市
selectB.innerHTML = "";
for(var i = 0; i < b.length; i++) {
var option = "<option value='" + i +"'>" + b[i].name + "</option>";
selectB.innerHTML = selectB.innerHTML + option;
}
}
function functionB() {
var value = selectB.value;
var c = b[value].sub;//获取三级区域
if (c === undefined) {//判断区域是否存在
selectC.setAttribute("hidden", "hidden");
return;
}
selectC.removeAttribute("hidden");
selectC.innerHTML = ""
for(var i = 0; i < b.length; i++) {
var option = "<option value='" + i +"'>" + c[i].name + "</option>";
selectC.innerHTML = selectC.innerHTML + option;
}
}
</script>
</html>
