Ajax Implementation of City Two-level联动 (Part 1)

The previous article put both provinces and cities in the JS, here the cities are placed in PHP, and the city data is rendered to the page through sending an Ajax request.

1、html

<select id="province">
 <option>Please select</option>
 <option>Shandong Province</option>
 <option>Liaoning Province</option>
 <option>Jilin Province</option>
 </select>
 <select id="city">
 <option>Please select</option>
 </select>

2,javascript

<script>
 /*
  * What needs to be considered?63;
  * * When to execute the Ajax asynchronous request?63;
  * * When the user selects specific province information
  */
 // 1. Bind onchange event to the element with id 'province'
 var provinceEle = document.getElementById("province");
 provinceEle.onchange = function(){
  // Clear
  var city = document.getElementById("city");
  var opts = city.getElementsByTagName("option");
  for(var z=opts.length-1;z>0;z--{
   city.removeChild(opts[z]);
  }
  if(provinceEle.value != "Please select"){
   // 2. Execute Ajax asynchronous request
   var xhr = getXhr();
   xhr.open("post","06.php");
   xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   xhr.send("province="+provinceEle.value);
   xhr.onreadystatechange = function(){
    if(xhr.readyState==4&&xhr.status==200){
     // Receiving the data content from the server
     var data = xhr.responseText;
     // data is a string, converted to an array
     var cities = data.split(",");
     for(var i=0;i<cities.length;i++{
      var option = document.createElement("option");
      var textNode = document.createTextNode(cities[i]);
      option.appendChild(textNode);
      city.appendChild(option);
     }
    }
   }
  }
 };
 // Define the function to get the core object of AJAX XMLHttpRequest object
 function getXhr(){
  var xhr = null;
  if(window.XMLHttpRequest){
   xhr = new XMLHttpRequest();
  }
   xhr = new ActiveXObject("Microsoft.XMLHttp");
  }
  return xhr;
 }
 </script>

3、06.php

<?php
 // Used to process the data of the second-level联动 data sent by the client
 // 1. Receive the province information sent by the client
 $province = $_POST['province'];
 // 2. Determine the current province information and provide different city information
 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;
  }
 // The server responds with a string
?>

That's all for this article. Hope it helps your learning and also hope everyone supports the Yelling Tutorial.

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, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please report via email to codebox.com (replace # with @) and provide relevant evidence. Once verified, this site will immediately delete the infringing content.