下面我们用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. Ninja介绍
			
    什么是Ninja 在Unix/Linux下通常使用Makefile来控制代码的编译,但是Makefile对于比较大的项目有时候会比较慢,看看上面那副漫画,代码在编译都变成了程序员放松的借口了.所以这个 ...
    
			
    2. 
						
  2. bootstrap 基本页面元素，代码，列表
			
    bootstrap 基本页面元素,代码,列表 <!DOCTYPE html> <html> <head> <title></title> & ...
    
			
    3. 
						
  3. Spring context:component-scan代替context:annotation-config
			
    Spring context:component-scan代替context:annotation-config XML: <?xml version="1.0" encod ...
    
			
    4. 
						
  4. ExtJS与后台Java交互
			
    参考博客:http://blog.csdn.net/wanghuan203/article/details/8125970 开发环境:Eclipse + Tomcat + ExtJS6.0 工程目录结 ...
    
			
    5. 
						
  5. 第三章 Python 的容器： 列表、元组、字典与集合
			
    列表是Python的6种内建序列(列表,元组,字符串,Unicode字符串,buffer对象,xrange对象)之一, 列表内的值可以进行更改,操作灵活,在Python脚本中应用非常广泛 列表的语法格 ...
    
			
    6. 
						
  6. 通过判断cookie过期方式向Memcached中添加,取出数据(Java)
			
    应用场景:在数据驱动的web开发中,经常要重复从数据库中取出相同的数据,这种重复极大的增加了数据库负载.缓存是解决这个问题的好办法.但是ASP.NET中的虽然已经可以实现对页面局部进行缓存,但还是不够 ...
    
			
    7. 
						
  7. GoldenGate 传统抽取进程的 ADG 模式
			
    :first-child { margin-top: 0; } blockquote > :last-child { margin-bottom: 0; } img { border: 0; m ...
    
			
    8. 
						
  8. swift 2.0  与 OC 相比较，标签栏和导航栏书写的差别
			
    下面是swift书写的时候的两个方法,其实这里不是教大家怎么样写的这个问题,我是想通过这两个不同语言的进行的一个比较,向大家找他们之间“想法”上的一些相同点,这样子我们学习swift的时候,就可以更加 ...
    
			
    9. 
						
  9. java 继承的学习（转）
			
    转自:http://www.cnblogs.com/happyframework/p/3332243.html,非常感谢啊 public class test { /** * @param args  ...
    
			
    10. 
						
  10. ReentrantLock实现原理
			
    以下是本篇文章的大纲 1 synchronized和lock 1.1 synchronized的局限性 1.2 Lock简介 2 AQS 3 lock()与unlock()实现原理 3.1 基础知识  ...
    
			
    11.