Ajax implementation simple drop-down options

Basic is a fixed step! Operations primarily in JavaScript and PHP

1. There are only two select tags in the HTML code as follows:

<SelectID= "Province">    <option>Please select</option>  </Select>  <SelectID= "City">    <option>Please select</option>  </Select>

2. The steps to create an option in JavaScript and to perform an AJAX asynchronous request are as follows

<script>var xhr = GETXHR ();//The first time an AJAX asynchronous request is performed-Province window.onload = function () {Xhr.open ("get", "finaly.php?state=1"); Xhr.send (null); xhr.onreadystatechange = function () {if (xhr.readystate==4&&xhr.status==200) {var data = xhr.responsetext;//converts a string to an array of var provinces = Data.split (",");//iterates over the arrays for (Var i=0;i<provinces.length;i++) {// Create an OPTION element to add the ID to the province element on var option = document.createelement ("option"); var text = document.createTextNode ( Provinces[i]); Option.appendchild (text), var province = document.getElementById ("province");p Rovince.appendchild ( option);}}} The second time the Ajax asynchronous request is performed-city var Provinceele=document.getelementbyid ("province");p Rovinceele.onchange = function () {var town = document.getElementById ("City"), var opts = city.getelementsbytagname ("option"); for (Var z=opts.length-1;z>0;z--) {City.removechild (opts[z]);} if (province.value! = "Please select") {Xhr.open ("post", "finaly.php"); Xhr.setrequestheader ("Content-type", "application/ X-www-form-urlencoded "); Xhr.send (" province= "+province.value); xhr.onreadystatechange = function () {if (xhr.readystate==4&&xhr.status==200) {var data = Xhr.responsetext;var Cities = Data.split (","); for (Var i=0;i<cities.length;i++) {var option = document.createelement ("option"); var text = document.createTextNode (Cities[i]); Option.appendchild (text); city.appendchild (option);}}}} function getxhr () {var xhr = null;if (window. XMLHttpRequest) {xhr = new XMLHttpRequest ();} ELSE{XHR = new ActiveXObject ("Microsoft.XMLHTTP");}  return XHR;} </script>

3, the PHP code is as follows: File name: finaly.php and JS: Xhr.open (method,url) method URL Docking!

<?php//receive the request data sent by the client-state$state = $_request[' state '];//determine the value of $state if ($state = = 1) {//Get the province Echo ' Shandong province, Liaoning Province, Jilin Province ';} else{//Get City $province = $_post[' province '];switch ($province) {case ' Shandong Province ': Echo ' Qingdao, Jinan, Weihai, Rizhao, Dezhou '; Break;case ' Liaoning Province ': Echo ' Shenyang, Dalian, Tieling, Dandong, Jinzhou '; Break;case ' Jilin Province ': Echo ' Changchun, Songyuan, Jilin, Tonghua, Siping '; >

The key is how to implement Ajax asynchronous interaction: Reference JS code. Can say the fixed steps

Ajax implementation simple drop-down options