Explanation of small cases of provincial and municipal linkage at the second level

During the web development process, when choosing provinces and cities, the relationship between provinces and cities is a small secondary linkage case, which uses HTML, css, php, js and

AJAX's asynchronous request

First, create the city.php and province.php files and connet.html, and write out the general structure of the secondary linkage. 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 request are as follows:

 <script>// Get data from the server through Ajax var provinceElement = document.getElementById("province");window.onload = function(){// Create core object var xhr = getXhr();// Listen xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){// Jilin Province, Liaoning Province, Shandong Province var data = xhr.responseText;// Process 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);}}}// Create a connection xhr.open("get","province.php");// Send data xhr.send(null);}// 2. The user selects a different province provinceElement.onchange = function(){// a. Clear the 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 the value selected by the user (province) var provinceValue = this.value; if(provinceValue == "Please select"){ return false;}// c. Get the city 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 == 200){ var data = xhr.responseText; 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>province.php code is as follows: <?php// Respond to the province information echo 'Jilin Province, Liaoning Province, Shandong Province';?>

The city.php code is as follows:

 <?php// 1. Receive client request data $province = $_POST['province'];// 2. Provide different cities switch ($province){case 'Jilin Province':echo 'Changchun City, Songyuan City, Baishan City, Tonghua City, Liaoyuan City';break;case 'Liaoning Province':echo 'Shenyang City, Dalian City, Jinzhou City, Tieling City, Dandong City';break;case 'Shandong Province':echo 'Jinan City, Qingdao City, Weihai City, Rizhao City, Dezhou City';break;}

The final interface diagram is as follows:

The above is a small case of provincial and municipal linkage at the second level introduced by the editor. I hope it will be helpful to you. If you want to know more, please pay attention to Wulin.com!