Second-level linkage small case

In the process of web development, when choosing provinces and cities, there is a correlation between provinces and municipalities, this is a small two-level linkage case, the use of HTML, CSS, PHP, JS and Ajax asynchronous request

First build city.php and province.php files and connet.html, the approximate structure of the two-level linkage is written out, the HTML code is as follows:

<label> Province:</label>
<select id= "Province" >
<option> Please select </option>
</select>
<label> City:</label>
<select id= "City" >
<option> Please select </option>
</select>

The JS code and AJAX requests are as follows:

<script>
Get data from the server side via Ajax
var provinceelement = document.getElementById ("province");

Window.onload = function () {

//Create core object
var xhr = getxhr ();
Listener
Xhr.onreadystatechange = function () {
if (xhr.readystate = = 4 && Xhr.status = =) {
//Jilin Province, Liaoning Province, Shandong Save
var data = Xhr.responsetext;
　　Processing Data
var arr = data.split (', ');
for (Var i=0;i<arr.length;i++) {
//<option> Please select </option>
var opt = document.createelement (" Option ");
var text = document.createTextNode (Arr[i]);
Opt.appendchild (text);
Provinceelement.appendchild (opt);
}
}
}
//Establish connection
Xhr.open ("Get", "province.php");
Send data
Xhr.send (null);
}

//2. User selects a different province
Provinceelement.onchange = function () {
//A. Clear City list
var cityelement = document.getElementById ("City");
var opts = cityelement.getelementsbytagname ("option");
for (Var i=1;i<opts.length;i++) {
Cityelement.removechild (opts[i]);
i--;　　
}

//b. Get user selected value (province)
var provincevalue = this.value;
if (Provincevalue = = "Please select") {
return false;
}
//C. Get city by province via Ajax
var xhr = getxhr ();
Xhr.open ("Post", "city.php");
Xhr.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
Xhr.send ("province=" +provincevalue);
Xhr.onreadystatechange = function () {
if (xhr.readystate = = 4 && Xhr.status = =) {
var data = Xhr.re Sponsetext;
var arr = data.split (",");
for (Var i=0;i<arr.length;i++) {
//<option> city </option>
var opt = document.createelement (" Option ");
var text = document.createTextNode (Arr[i]);
Opt.appendchild (text);

　　Cityelement.appendchild (opt);

}
}
}
}

function Getxhr () {
var xhr = null;
if (window. XMLHttpRequest) {
XHR = new XMLHttpRequest ();
}else{
XHR = new ActiveXObject ("Microsoft.XMLHTTP");
}
return XHR;
}
</script>

The province.php code is as follows:

<?php
Respond to province information
Echo ' Jilin Province, Liaoning Province, Shandong Province ';
?>

The city.php code is as follows:

<?php
1. Receiving request data from the client
$province = $_post[' province ');
2. Depending on the province, different cities are available
Switch ($province) {
Case ' Jilin Province ':
Echo ' Changchun, Songyuan, Bss, Tonghua, Liaoyuan ';
Break
Case ' Liaoning Province ':
Echo ' Shenyang, Dalian, Jinzhou, Tieling, Dandong ';
Break
Case ' Shandong Province ':
Echo ' Jinan, Qingdao, Weihai, Rizhao, Dezhou ';
Break
}

The final interface diagram is as follows:

Second-level linkage small case