Home > Web Front-end > JS Tutorial > body text

Ajax implements simple drop-down option effect (detailed explanation with pictures and text)

php中世界最好的语言
Release: 2018-04-04 16:32:48
Original
1370 people have browsed it

This time I will bring you the effect of Ajax to implement simple drop-down options (detailed pictures and texts). What are the precautions for Ajax to implement simple drop-down options? . The following is a practical case, let's take a look.

They are basically fixed steps! Mainly operations in JAVASCRIPT and PHP

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

<select id="province">
  <option>请选择</option>
 </select>
 <select id="city">
  <option>请选择</option>
 </select>
Copy after login

2. Create options and execute AJAX in Javascript The asynchronous request steps are as follows

<script> 
  var xhr = getXhr(); 
  // 第一次执行Ajax异步请求 - 省份 
  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; 
        // 将字符串转换为数组 
        var provinces = data.split(","); 
        // 遍历数组 
        for(var i=0;i<provinces.length;i++){ 
          // 创建option元素添加到id为province元素上 
          var option = document.createElement("option"); 
          var text = document.createTextNode(provinces[i]); 
          option.appendChild(text); 
          var province = document.getElementById("province"); 
          province.appendChild(option); 
        } 
      }  
    } 
  } 
  // 第二次执行Ajax异步请求 - 城市 
  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 != "请选择"){ 
      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>
Copy after login

3. The PHP code is as follows: the file name is: finaly.php and is connected to the url of the xhr.open(method,url) method in JS!

<?php 
  // 接收客户端发送的请求数据 - state 
  $state = $_REQUEST[&#39;state&#39;]; 
  // 判断$state的值 
  if($state == 1){// 获取省份 
    echo &#39;山东省,辽宁省,吉林省&#39;; 
  }else{// 获取城市 
    $province = $_POST[&#39;province&#39;]; 
    switch ($province){ 
      case &#39;山东省&#39;: 
        echo &#39;青岛市,济南市,威海市,日照市,德州市&#39;; 
        break; 
      case &#39;辽宁省&#39;: 
        echo &#39;沈阳市,大连市,铁岭市,丹东市,锦州市&#39;; 
        break; 
      case &#39;吉林省&#39;: 
        echo &#39;长春市,松原市,吉林市,通化市,四平市&#39;; 
        break; 
    } 
  } 
?>
Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Methods for ajax to read Json data

Methods to construct AJAX to implement form JSON conversion

The above is the detailed content of Ajax implements simple drop-down option effect (detailed explanation with pictures and text). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template