下面我们用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>";

     $("#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);




显示效果如下：




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


											
ajax(省，市，县)三级联动的更多相关文章
	

    
						
  1. 多级联动系列——ajax调用XML实现三级联动
		
    ajax 使用起来特别的方便,再也不操心浏览器兼容问题了.用ajax调用XML页面中的内容,来生成三级联动,OK废话不多说,跟着我一步步写吧. 首先写一个XML文件.data.xml <?xml ...
    
		
    2. 
						
  2. 省市区(县)三级联动代码（js 数据源）
		
    ylbtech-JavaScript-Utility:省市区(县)三级联动代码(js 数据源) 省市区(县)三级联动代码(js 数据源) 1.A,源代码(Source Code)返回顶部 1.A.1, ...
    
		
    3. 
						
  3. 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能
		
    使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...
    
		
    4. 
						
  4. js之省市区(县)三级联动效果
		
    省市区(县)三级联动效果,是我们软件开发比较常用的,特别是对一些crm,erp之类,当然也包括其他的后台管理系统,基本都涉及到,今天贴出这个常用的,方便个人复用和大家使用 <!DOCTYPE h ...
    
		
    5. 
						
  5. html实现  省——市——区三级联动
		
    html实现  省——市——区三级联动 html中实现三级联动是一个不错的demo,博主在这里跟大家分享一下实现的过程,以及自己在过程中出现的一些问题,仅供参考. 首先我们将全国的省市区数据导入进来, ...
    
		
    6. 
								
  6. 用php+mysql+ajax+jquery做省市区三级联动
		
    要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates ...
    
		
    7. 
						
  7. 【2017-06-06】Ajax完整结构、三级联动的制作
		
    一.Ajax完整结构 $.ajax({ url:"Main.ashx", data:{}, dataType:"json", type:"post&q ...
    
		
    8. 
						
  8. UIPickerView实现省 市 区三级联动
		
    前几天用UIPickerView实现了一下三级联动具体的如下图
    
		
    9. 
						
  9. ComboBox（下拉列表框）实现省、市、县三级联动,用hibernate连接数据库
		
    package com.hanqi.web; import java.io.IOException; import java.util.List; import javax.servlet.Servl ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Flex中escape/encodeURI/encodeURIComponent的区别
			
    Flex中提供了三种转码函数,各有各的区别, escape,encodeURI,encodeURIComponent 这三个函数不仅在flex中有道运用在javascript中同样的含义 ,今天我仔细 ...
    
			
    2. 
						
  2. Linux笔记（七） - 网络命令
			
    (1)给用户发信息:write例:write admin(ctrl+d结束)(2)发广播信息:wall例:wall hello world!(3)测试网络连通性:ping-c 发送次数例:ping - ...
    
			
    3. 
						
  3. IEcss样式，行高的问题
			
    input的文本内容显示一定要用line-height,不然会出现内容错位的问题
    
			
    4. 
						
  4. SuperSocket入门（三）-Telnet多服务实例和服务实例交互配置详解
			
        在SuperSocket入门(二)中我们已经简单了解了通过配置App.config文件使用BootStrap启动SuperSocket服务.我们先来看一下上个案例中的基本配置文件示例: < ...
    
			
    5. 
						
  5. Awesome Chrome 插件集锦
			
    子曾曰:"工欲善其事,必先利其器.居是邦也."--语出<论语·卫灵公>:其后一百多年,荀子也在其<劝学>中倡言道:"吾尝终日而思矣,不如须臾之所学 ...
    
			
    6. 
						
  6. WebForm 控件（二）
			
    控件 Calendar:日历控件 但是html代码量太大不适用 FileUpdate: 文件上传 HiddenField:隐藏域 Image: 图片  可以直接给URL 不适用可用html代码写 Ta ...
    
			
    7. 
						
  7. iOS WebViewJavascriptBridge初步尝试与图文详细讲解
			
    JS和OC的交互这是个永恒话题,使用场景也是越来越多,如今一些reactnative.vue框架等,都是在重点结合原生与H5的混合使用. 那么,如何快捷方便的使用两者交互是一个很重要的关键点. 1.传 ...
    
			
    8. 
						
  8. linux 进程间通信 之fifo
			
    上一篇博客已经介绍了一种进程间通信的方式,但是那只是针对于有血缘关系的进程,即父子进程间的通信,那对于没有血缘关系的进程,那要怎么通信呢?  这就要创建一个有名管道,来解决无血缘关系的进程通信, fi ...
    
			
    9. 
						
  9. jQuery插件，将内容插入到光标处
			
    (function ($) { $.fn.extend({ insertAtCaret : function (myValue) { var $t = $(this)[0]; if (document ...
    
			
    10. 
						
  10. WP8.1开发中关于媒体（图片）文件的生成操作，属性如何设置（内容/嵌入资源等）；
			
    (转载)WindowsPhone问题笔记-- 正确选择build action 解决媒体资源无法读取问题 链接:http://www.cnblogs.com/qinxg/archive/2012/07 ...
    
			
    11.