前一篇是把省份和城市都写在JS里，这里把城市放在PHP里，通过发送Ajax请求城市数据渲染到页面。

1、html

<select id="province">
 <option>请选择</option>
 <option>山东省</option>
 <option>辽宁省</option>
 <option>吉林省</option>
 </select>
 <select id="city">
 <option>请选择</option>
 </select>

2、javascript

<script>
 /*
  * 需要思考哪些事情?
  * * 在什么时候执行Ajax的异步请求?
  * * 当用户选择具体的省份信息时
  */
 // 1. 为id为province元素绑定onchange事件
 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(provinceEle.value != "请选择"){
   // 2. 执行Ajax异步请求
   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){
     // 接收服务器端的数据内容
     var data = xhr.responseText;
     // data是字符串,转换为数组
     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);
     }
    }
   }
  }
  
 };
 // 定义获取ajax核心对象的函数XMLHttpRequest对象的函数
 function getXhr(){
  var xhr = null;
  if(window.XMLHttpRequest){
   xhr = new XMLHttpRequest();
  }else{
   xhr = new ActiveXObject("Microsoft.XMLHttp");
  }
  return xhr;
 }
 </script>

3、06.php

<?php
 // 用于处理客户端请求二级联动的数据
 // 1. 接收客户端发送的省份信息
 $province = $_POST['province'];
 // 2. 判断当前的省份信息,提供不同的城市信息
 switch ($province){
   case '山东省':
    echo '青岛市,济南市,威海市,日照市,德州市';
    break;
   case '辽宁省':
    echo '沈阳市,大连市,铁岭市,丹东市,锦州市';
    break;
   case '吉林省':
    echo '长春市,松原市,吉林市,通化市,四平市';
    break;
  }
 // 服务器端响应的是字符串
?>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# Ajax  # 二级联动  # Ajax结合php实现二级联动  # Spring MVC中Ajax实现二级联动的简单实例  # jQuery+JSON实现AJAX二级联动实例分析  # AJAX解析XML实例之下拉框省、市二级联动  # ajax读取数据库内容实现二级联动下拉选择菜单示例  # Ajax二级联动菜单实现原理及代码  # asp.net下使用AjaxPro实现二级联动代码  # 基于asp+ajax和数据库驱动的二级联动菜单  # 一个强健 实用的asp+ajax二级联动菜单(有演示和附源程序打包下载)  # 请选择  # 吉林省  # 辽宁省  # 山东省  # 松原市  # 通化市  # 铁岭市  # 日照市  # 德州市  # 锦州市  # 丹东市  # 威海市  # 吉林市  # 长春市  # 的是  # 大连市  # 客户端  # 沈阳市  # 济南市  # 青岛市 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel全局作用域是什么_Laravel Eloquent Global Scopes应用指南  php在windows下怎么调试_phpwindows环境调试操作说明【操作】  如何续费美橙建站之星域名及服务？  Laravel如何使用Guzzle调用外部接口_Laravel发起HTTP请求与JSON数据解析【详解】  javascript基本数据类型及类型检测常用方法小结  Laravel怎么集成Vue.js_Laravel Mix配置Vue开发环境  JS去除重复并统计数量的实现方法  武汉网站设计制作公司,武汉有哪些比较大的同城网站或论坛，就是里面都是武汉人的？  Laravel如何使用Gate和Policy进行权限控制_Laravel权限判定与策略规则配置  动图在线制作网站有哪些,滑动动图图集怎么做？  WordPress 子目录安装中正确处理脚本路径的完整指南  php打包exe后无法访问网络共享_共享权限设置方法【教程】  Laravel如何处理JSON字段的查询和更新_Laravel JSON列操作与查询技巧  阿里云网站搭建费用解析：服务器价格与建站成本优化指南  用yum安装MySQLdb模块的步骤方法  Windows10如何删除恢复分区_Win10 Diskpart命令强制删除分区  Python高阶函数应用_函数作为参数说明【指导】  邀请函制作网站有哪些,有没有做年会邀请函的网站啊？在线制作，模板很多的那种？  Laravel请求验证怎么写_Laravel Validator自定义表单验证规则教程  轻松掌握MySQL函数中的last_insert_id()  国美网站制作流程,国美电器蒸汽鍋怎么用官方网站？  详解阿里云nginx服务器多站点的配置  Python自然语言搜索引擎项目教程_倒排索引查询优化案例  Laravel如何监控和管理失败的队列任务_Laravel失败任务处理与监控  如何在 React 中条件性地遍历数组并渲染元素  桂林网站制作公司有哪些,桂林马拉松怎么报名？  Laravel如何使用Collections进行数据处理？（实用方法示例）  北京专业网站制作设计师招聘,北京白云观官方网站？  Laravel怎么使用Session存储数据_Laravel会话管理与自定义驱动配置【详解】  Windows驱动无法加载错误解决方法_驱动签名验证失败处理步骤  如何快速搭建安全的FTP站点？  Laravel如何创建自定义Facades？（详细步骤）  Swift中switch语句区间和元组模式匹配  如何撰写建站申请书？关键要点有哪些？  Laravel如何升级到最新版本？（升级指南和步骤）  php后缀怎么变mp4格式错误_修改扩展名提示格式不对怎么办【技巧】  Laravel如何实现URL美化Slug功能_Laravel使用eloquent-sluggable生成别名【方法】  微信小程序 闭包写法详细介绍  如何快速查询网站的真实建站时间？  Laravel如何配置Horizon来管理队列？（安装和使用）  制作企业网站建设方案,怎样建设一个公司网站？  5种Android数据存储方式汇总  什么是javascript作用域_全局和局部作用域有什么区别？  Laravel如何升级到最新的版本_Laravel版本升级流程与兼容性处理  Laravel Eloquent关联是什么_Laravel模型一对一与一对多关系精讲  高性能网站服务器部署指南：稳定运行与安全配置优化方案  如何生成腾讯云建站专用兑换码？  香港代理服务器配置指南：高匿IP选择、跨境加速与SEO优化技巧  Laravel怎么创建自己的包(Package)_Laravel扩展包开发入门到发布  Laravel如何使用Blade模板引擎？（完整语法和示例）