小程序定制开发_jQuery ajax完成省市县三级联动

2021-01-12 12:59 admin
jQuery ajax实现省市县三级联动     —21克的爱   这篇文章主要为大家详细介绍了jQuery ajax实现省市县三级联动的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

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

首先我们要建立数据库:

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

下面我们就写面: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 
 $("#(str);//三个下拉显示

//做三个方法分别为省市区 //填充省的方法,如何在表里查询 出省的代号例如:北京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 $("#(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 $("#(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 $("#(str); }

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

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

显示效果如下:

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

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