<!--/**
* @fileName: linkageUI.class.php
* @author: WK
* @DateTime: 2017/10/29 17:25
* @Description:
*/-
<! DOCTYPE html>
<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>
<body>
Province:
<select id= "province" Name= "";
<option value= ""
Please select
</option>
</select>
City:
<select id= "Cities" name= "";
<option value= "
Please select
</option>
</select>
District/County:
<select id= "district" Name= "";
<option Value= "";
Please select
</option>
</select>
</body>
<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>
Native JS implementation of Ajax provinces and cities triple