Ajax implementation Simple dropdown option effect "recommended" _ajax related

Basically are fixed steps! Operations primarily in JavaScript and PHP

1, there are only two select tags in the HTML code:

<select id= "province" >
  <option> Please select </option>
 </select>
 <select id= "City" >
  <option> Please select </option>
 </select>

2. Creating options in JavaScript and performing Ajax asynchronous requests are the following steps

<script> var xhr = getxhr (); 
    First time Ajax asynchronous request-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.response 
        Text; 
        Converts a string to an array of var provinces = Data.split (",");  Traversal array for (Var i=0;i<provinces.length;i++) {//create option element to add to the Id province element var option = 
          Document.createelement ("option"); 
          var text = document.createTextNode (provinces[i]); 
          Option.appendchild (text); 
          var province = document.getElementById ("province"); 
        Province.appendchild (option); 
  The second execution of the Ajax asynchronous request-the city var Provinceele=document.getelementbyid ("province"); 
    Provinceele.onchange = function () {var city = 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.re 
          Sponsetext; 
          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, PHP code as follows: File name: finaly.php and JS: Xhr.open (Method,url) method of the URL docking!

<?php 
  //Receiving request data sent by client-state 
  $state = $_request[' state ']; 
  To determine the value of $state 
  if ($state = = 1) {//Get the province 
    Echo ' Shandong province, Liaoning Province, Jilin Province '; 
  } else{//get the 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 '; 
        break; 
    } 
? > 

The key is how to implement the Ajax asynchronous interaction: Refer to the JS code. Can be said to the fixed steps.

The above Ajax implementation of simple Drop-down option effect "recommendation" is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud-dwelling community.