Ajax实现简单下拉选项效果【推荐】


            基本都是固定步骤！主要在JAVASCRIPT和PHP中的操作

1、HTML代码里就只有两个SELECT标签如下：





<select id="province">

  <option>请选择</option>

 </select>

 <select id="city">

  <option>请选择</option>

 </select>



2、Javascript中进行创建选项和执行AJAX异步请求步骤如下





<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>



3、PHP代码如下：文件名为：finaly.php与JS中：xhr.open(method,url)方法的url对接！





<?php 

  // 接收客户端发送的请求数据 - state 

  $state = $_REQUEST['state']; 

  // 判断$state的值 

  if($state == 1){// 获取省份 

    echo '山东省,辽宁省,吉林省'; 

  }else{// 获取城市 

    $province = $_POST['province']; 

    switch ($province){ 

      case '山东省': 

        echo '青岛市,济南市,威海市,日照市,德州市'; 

        break; 

      case '辽宁省': 

        echo '沈阳市,大连市,铁岭市,丹东市,锦州市'; 

        break; 

      case '吉林省': 

        echo '长春市,松原市,吉林市,通化市,四平市'; 

        break; 

    } 

  } 

?> 





关键就是如何实现AJAX异步交互：参考JS代码。可以说的固定步骤。

以上这篇Ajax实现简单下拉选项效果【推荐】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持中文源码网。