下面我们用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. C++中的输入参考
			
    1.输入输出 1)operator>> 参考:cplusplus.com Extracts characters from is and stores them in s as a c-s ...
    
			
    2. 
						
  2. jQuery事件触发和参数传递
			
    jQuery事件触发和参数传递: 参考:http://www.jb51.net/article/36249.htm <%@ page language="java" impo ...
    
			
    3. 
						
  3. Prolog 外部不能有 DOCTYPE 声明。处理资源 'http://192.168.115.152:8082/api/EmpApi.aspx' 时出错。第 3 行，位置: 11
			
    在Default.aspx代码中删除以下代码(其他窗口也是这样删除): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
    
			
    4. 
						
  4. Postman编程
			
    Postman常用Api Postman像jmeter一样提供前置处理脚本和后置处理脚本.脚本主要使用JavaScript语法,并内置提供了一些js代码库,提供了一些内置对象和方法. 参考:https ...
    
			
    5. 
						
  5. linux脚本错误: line *: [: missing `]'
			
    错误: line *: [: missing `]' 写脚本时,我碰到这个问题是因为if [ ]; ...else...fi语句 解决方法: if后面的[] (test) 和条件要有空格,如: 对于语 ...
    
			
    6. 
						
  6. Codeforces 708A Letters Cyclic Shift
			
    A. Letters Cyclic Shift time limit per test:1 second memory limit per test:256 megabytes input:stand ...
    
			
    7. 
						
  7. 使用ViewPagerAdapter 页面引导适配器设置app启动页，引导页面的实现
			
    一般的app第一次安装启动的时候,都会有一个启动页面和引导页的画面,然后才进入主程序.anndroid中的ViewPagerAdapter 是一个继承与PageAdapter的 页面引导适配器.由于我 ...
    
			
    8. 
						
  8. 一个RESTful+MySQL程序
			
    前言 本章内容适合初学者(本人也是初学者). 上一章内容(http://www.cnblogs.com/vanezkw/p/6414392.html)是在浏览器中显示Hello World,今天我们要 ...
    
			
    9. 
						
  9. Repeater中使用倒计时
			
    <asp:Label ID="lblTime" runat="server" Text='<%# FormatDateString(Eval(&qu ...
    
			
    10. 
						
  10. devexpress实现模仿Win8桌面metro风格
			
    1.devexpress强大的控件库,可很容易的实现Win8桌面metro风格.使用的TileControl控件,拖动与Win效果相同.所有图片均来自网络资源.每个块也可实现如图所示的四种大小,如何实 ...
    
			
    11.