原生JS實現ajax省市區三聯
<!-- /**
* @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省市區三聯