Ajax realizes the two-level linkage of cities (Part Three)

This article shares the specific code for implementing city two-level linkage with Ajax, for your reference, the specific content is as follows

This is the third article in the series of articles on implementing city two-level linkage with Ajax, bringing together the previous2Integrate the articles together

1、html

<select id="province">
 <option>Select please</option>
 </select>
 <select id="city">
 <option>Select please</option>
 </select>

2、javascript

//Create a function to obtain the core AJAX object
  function getXhr(){
   var xhr = null;
   if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
   }
    xhr = new ActiveXObject("Microsoft.XMLHttp");
   }
   return xhr;
  }
  var xhr = getXhr();
  // The first execution of 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.responseText;
     // Convert the string to an array
     var provinces = data.split(",");
     // Traverse the array
     for(var i=0;i<provinces.length;i++{
      // Create an option element and add it to the element with id 'province'
      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 Ajax asynchronous request - City
  var province=document.getElementById("province");
  province.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 != "请选择"){
    xhr.open("post","finaly.php");
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.send("state="2&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);
      }
     }
    }
   }
  };

3finaly.php

<?php
 // Receive the client's request data - state
 $state = $_REQUEST['state'];
 // Judge the value of $state
 if($state == 1{// Get Province
  echo 'Shandong Province, Liaoning Province, Jilin Province';
 }// Get City
  $province = $_POST['province'];
  switch ($province){
   case 'Shandong Province':
    echo 'Qingdao City, Jinan City, Weihai City, Rizhao City, Dezhou City';
    break;
   case 'Liaoning Province':
    echo 'Shenyang City, Dalian City, Tieling City, Dandong City, Jinzhou City';
    break;
   case 'Jilin Province':
    echo 'Changchun City, Songyuan City, Jilin City, Tonghua City, Siping City';
    break;
  }
 }
?>

That's all for this article. I hope it will be helpful to everyone's learning and also hope everyone will support the Yelling Tutorial more.

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, does not edit the content manually, and does not bear the relevant legal responsibility. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.)