• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    Ajax实现城市二级联动(三)

    本文实例为大家分享了Ajax实现城市二级联动的具体代码,供大家参考,具体内容如下

    这是Ajax实现城市二级联动系列文章第三篇,把之前2篇整合在一起

    1、html

    select id="province">
     option>请选择/option>
     /select>
     select id="city">
     option>请选择/option>
     /select>
    

    2、javascript

    //创建获取ajax核心对象的函数
      function getXhr(){
       var xhr = null;
       if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
       }else{
        xhr = new ActiveXObject("Microsoft.XMLHttp");
       }
       return xhr;
      }
      var xhr = getXhr();
      // 第一次执行Ajax异步请求 - 省份
      window.onload = function(){
       xhr.open("get","finaly.php?state=1");
       xhr.send(null);
       xhr.onreadystatechange = function(){
       if(xhr.readyState==4xhr.status==200){
         var data = xhr.responseText;
         // 将字符串转换为数组
         var provinces = data.split(",");
         // 遍历数组
         for(var i=0;iprovinces.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 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=2province="+province.value);
        xhr.onreadystatechange = function(){
         if(xhr.readyState==4xhr.status==200){
          var data = xhr.responseText;
          var cities = data.split(",");
          for(var i=0;icities.length;i++){
           var option = document.createElement("option");
           var text = document.createTextNode(cities[i]);
           option.appendChild(text);
           city.appendChild(option);
          }
         }
        }
       }
      };

    3、finaly.php

    ?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结合php实现二级联动
    • 几种二级联动案例(jQuery\Array\Ajax php)
    • Spring MVC中Ajax实现二级联动的简单实例
    • jQuery+JSON实现AJAX二级联动实例分析
    • AJAX解析XML实例之下拉框省、市二级联动
    • ajax读取数据库内容实现二级联动下拉选择菜单示例
    • Ajax二级联动菜单实现原理及代码
    • asp.net下使用AjaxPro实现二级联动代码
    • 基于asp+ajax和数据库驱动的二级联动菜单
    • 一个强健 实用的asp+ajax二级联动菜单(有演示和附源程序打包下载)
    上一篇:AJAX实现无刷新检测用户名功能
    下一篇:AJAX跨域请求JSONP获取JSON数据的实例代码
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    Ajax实现城市二级联动(三) Ajax,实现,城市,二级,联动,