<!-- /**
* @fileName: linkageUI.class.php
* @author: wk
* @DateTime: 2017/10/29 17:25
* @Description:
*/ -->
<!DOCTYPE html>
<html lang="en">
???<head>
???????<meta charset="utf-8">
???????????<meta content="width=device-width, initial-scale=1.0" name="viewport">
???????????????<meta content="ie=edge" http-equiv="X-UA-Compatible">
???????????????????<title>
???????????????????????Document
???????????????????</title>
???????????????</meta>
???????????</meta>
???????</meta>
???</head>
???<body>
???????省:
???????<select id="province" name="">
???????????<option value="">
???????????????请选择
???????????</option>
???????</select>
???????市:
???????<select id="city" name="">
???????????<option value="">
???????????????请选择
???????????</option>
???????</select>
???????区/县:
???????<select id="district" name="">
???????????<option value="">
???????????????请选择
???????????</option>
???????</select>
???</body>
</html>
<script type="text/javascript">
???var province = document.getElementById("province");
var city = document.getElementById("city");
var district = document.getElementById("district");
window.onload = function(){
change("",province);
};
province.onchange = function(){
if(province.value != ""){
change(province.value,city);
}
city.options.length = 1;
district.options.length = 1;
};
city.onchange = function(){
if(city.value != ""){
change(city.value,district);
}
district.options.length = 1;
};
function change(objFvalue,objC){
var res = new XMLHttpRequest();
// res.open("GET","linkageDemo.php?code=" + objFvalue);
res.open("POST","linkageDemo.php");
res.onreadystatechange = function(){
if(res.readyState == 4 && res.status == 200){
var str = res.responseText;
if(str){
objC.options.length = 1;
createOption(str,objC);
}
}
};
res.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);
res.send("code="+objFvalue);
}
function createOption(str,obj){
var row = str.split(‘|‘);
for(var i in row){
arr = row[i].split(‘^‘);
var option = document.createElement("option");
option.value = arr[0];
option.text = arr[1];
console.log(option.text);
obj.appendChild(option);
}
}
</script>
原生JS实现ajax省市区三联
原文地址：http://www.cnblogs.com/kuku2/p/7753256.html