jQuery ajax实现省市县三级联动


Posted in Javascript onMarch 07, 2021

本文我们用Jquery,ajax,做一个省,市,县的三级联动:

下面是我做三级联动下拉的步骤以及逻辑

第一步:先做一个省市区表格
第二步:建个PHP页面显示用我是在<body>里放<div>用来接收要显示的省市区表格信息,里面嵌入jquery-1.11.2.min.js和自己封装的三联动省市区的方法
第三步:写封装方法用JS
第四步:做个纯php处理页面,这个页面处理传过来的任何代号

首先我们要建立数据库:

jQuery ajax实现省市县三级联动

这就是包含省,市,县的数据库。

下面我们就写主页面:sanji.php:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Document</title>
 <script src="jquery-1.11.2.min.js"></script>
 <script src="sanjiliandong.js"></script>
</head>
<body>
 <div id="sanjiliandong">
  <!--在这里使用三级联动插件-->
 </div>
</body>
</html>

然后就是js文件:

// JavaScript Document
$(document).ready(function(e){
 //向div里面仍三个下拉
  var str = "<select id='sheng'></select><select id='shi'></select><select id='qu'></select>";
 $("#sanjiliandong").html(str);//三个下拉显示
    
  
 //当省选中的话市也会跟着变去也会变。市和区都会加载一遍
 FillSheng();//省
 FillShi();//市
 FillQu();//区
 //给省加点击事件
 $("#sheng").change(function(){
   FillShi();//市
   FillQu();//区
  })
 //给市加点击事件
 $("#shi").change(function(){
   FillQu();//区
  })
});
//做三个方法分别为省市区
//填充省的方法,如何在表里查询 出省的代号例如:北京0001、天津0001,中国下面所有省都是0001开头的
function FillSheng()
{
 var pcode = "0001";
 $.ajax({
  async:false,
  url:"chuli.php",
  data:{pcode:pcode},
  type:"POST",
  dataType:"TEXT",
  success: function(data){
   //返回数据,根据行于行之间的分隔符来拆,拆完之后会返回一数组/行的数组
   var hang = data.split("|");
   
   var str = "<option value='' >请选择地区</option>";
   //把行的数组遍历下用for循环...length长度
   for(var i=0;i<hang.length;i++)
   {
    //把行的索引i在拆下.列与列的分隔符再拆
    var lie = hang[i].split("^");//这是列的数组
    str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
    
    $("#sheng").html(str);
   }
  }
 });
}
//填充市的方法
function FillShi()
{
 var pcode = $("#sheng").val();
 $.ajax({
  async:false,//****
  url:"chuli.php",
  data:{pcode:pcode},
  type:"POST",
  dataType:"TEXT",
  success: function(data){
   //返回数据,根据行于行之间的分隔符来拆,拆完之后会返回一数组/行的数组
   var hang = data.split("|");
   
   var str = "<option value='' >请选择城市</option>";
   //把行的数组遍历下用for循环...length长度
   for(var i=0;i<hang.length;i++)
   {
    //把行的索引i在拆下.列与列的分隔符再拆
    var lie = hang[i].split("^");//这是列的数组
    str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
   }
   $("#shi").html(str);
  }
 });
}
//填充区的方法
function FillQu()
{
 var pcode = $("#shi").val();
 $.ajax({
  async:false,
  url:"chuli.php",
  data:{pcode:pcode},
  type:"POST",
  dataType:"TEXT",
  success: function(data){
   //返回数据,根据行于行之间的分隔符来拆,拆完之后会返回一数组/行的数组
   var hang = data.split("|");
   
   var str = "<option value='' >请选择乡县</option>";
   //把行的数组遍历下用for循环...length长度
   for(var i=0;i<hang.length;i++)
   {
    //把行的索引i在拆下.列与列的分隔符再拆
    var lie = hang[i].split("^");//这是列的数组
    str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
    
    $("#qu").html(str);
   }
  }
 });
}

之后是查询数据库的处理文件:

<?php
 //处理页面只有一个功能处理传过来的所有代号(省、市、区。。。)
 include("DBDA.class.php");
 $db = new DBDA();
 $pcode = $_POST["pcode"];//取到赋值代号
 $sql = "select * from chinastates where parentareacode='{$pcode}'";
echo $db->StrQuery($sql);

显示效果如下:

jQuery ajax实现省市县三级联动jQuery ajax实现省市县三级联动

这就是我们要做的省,市,县的三级联动。在这里我们重点强调一下一定要做好逻辑关系,想好了在去动手写代码,要不然容易混乱,这样的话就只能从头开始。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript的9个陷阱及评点分析
May 16 Javascript
11款基于Javascript的文件管理器
Oct 25 Javascript
IE6,IE7下js动态加载图片不显示错误
Jul 17 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
js如何编写简单的ajax方法库
Aug 02 Javascript
js 获取json数组里面数组的长度实例
Oct 31 Javascript
深入理解JavaScript的async/await
Aug 05 Javascript
Vue传参一箩筐(页面、组件)
Apr 04 Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 Javascript
JS如何实现基于websocket的多端桥接平台
May 14 Javascript
Javascript前端经典的面试题及答案
Mar 14 #Javascript
layer弹出层框架alert与msg详解
Mar 14 #Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 #Javascript
利用js定义一个导航条菜单
Mar 14 #Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 #Javascript
使用BootStrap实现标签切换原理解析
Mar 14 #Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 #Javascript
You might like
PHP 定界符 使用技巧
2009/06/14 PHP
php实现mysql数据库操作类分享
2014/02/14 PHP
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
PHP页面跳转操作实例分析(header方法)
2016/09/28 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
javascript 缓冲运动框架的实现
2017/09/29 Javascript
Vue.js 2.x之组件的定义和注册图文详解
2018/06/19 Javascript
vue 实现一个简单的全局调用弹窗案例
2020/09/10 Javascript
[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity
2018/08/13 DOTA
python文件操作之目录遍历实例分析
2015/05/20 Python
python使用xmlrpclib模块实现对百度google的ping功能
2015/06/02 Python
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
Python用模块pytz来转换时区
2016/08/19 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
pandas分组聚合详解
2020/04/10 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
生产工厂门卫岗位职责
2014/09/26 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
幼儿园小班家长评语
2014/12/30 职场文书
学前班教学反思
2016/02/24 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP