<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>城市联动</title>
</head>
<body>
<select name="china" id="q">
<option value="">西安</option>
</select>
<select name="china" id="w">
<option value="">西安</option>
</select>
</body>
</html>
链接js部分
function ajax1809byJSONandDefault(obj) {
let defaultObj = {
"url":"#",
"method":"get",
"param":"",
"isAsync":true,
"func":null
};
for(let key in obj){
defaultObj[key] = obj[key];
}
//1、创建对象
let xhr = new XMLHttpRequest();
//2、设置请求参数
let urlAndParam = defaultObj.url;
if(defaultObj.method.toLowerCase()=="get"){
urlAndParam+="?"+defaultObj.param;
}
xhr.open(defaultObj.method,urlAndParam,defaultObj.isAsync);
//3、设置回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
defaultObj.func(xhr.responseText);
}
}
//4、发送请求
if(defaultObj.method.toLowerCase()=="post"){
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(defaultObj.param);
}else{
xhr.send();
}
}
<script type="text/javascript" src="js/ajaxtools.js"></script>
<script>
window.onload = function (){
getData();
$("q").onchange = function(){
showCity(this.value);
}
}
function func(str){
console.log(str);
}
function getData(){
ajax1809byJSONandDefault({
"url":"json/city.json",
"func":function(str){
showProvince(str);
showCity($("q").value);
}
});
}
let sheng
function showProvince(str){
let data = JSON.parse(str);
sheng = data.城市代码;
let htmlstr = "";
for(let i in sheng){
htmlstr += `<option value="${sheng[i].省}">${sheng[i].省}</option>`;
}
$("q").innerHTML = htmlstr;
}
function showCity(str){
let citys;
let htmlstr = "";
// alert("f");
for(let i in sheng){
if(sheng[i].省 == str){
citys = sheng[i].市;
}
}
for(let j in citys){
htmlstr += `<option value="${citys[j].编号}">${citys[j].市名}</option>`;
}
$("w").innerHTML = htmlstr;
}
function $(id){
return document.getElementById(id);
}
</script>