可以把它做成小插件的形式，以后需要，可以随时调

来看一下怎么来做

先来写个div然后，再引入js包

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="jquery-1.11.2.min.js"></script>

<script src="sanji.js"></script>

</head>

<body>

    <div id="sanji">

    </div>

</body>

</html>

引入的js文件，取名为sanji.js

然后来看看js文件是怎么写的

$(document).ready(function(e) {

    //向DIV里面扔三个下拉

    var str = "<select id='sheng'></select><select id='shi'></select><select id='qu'></select>";

    $("#sanji").html(str);

    FillSheng();

    FillShi();

    FillQu();

//选中项变化

    $("#sheng").change(function(){

            FillShi();

            FillQu();

        })

    $("#shi").change(function(){

            FillQu();

        })

});

//填充省的方法

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 = "";

                    for(var i=0;i<hang.length;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 = "";

                    for(var i=0;i<hang.length;i++)

                    {

                        var lie = hang[i].split("^");

                        str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";

                    }

                    $("#shi").html(str);

                }

        });

}

//填充区的方法

function FillQu()

{

    var pcode = $("#shi").val();

    $.ajax({

            url:"chuli.php",

            data:{pcode:pcode},

            type:"POST",

            dataType:"TEXT",

            success: function(data){

                    var hang = data.split("|");

                    var str = "";

                    for(var i=0;i<hang.length;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);

数据库的地区表是chinastates

根据传过来的父级代号来查所有数据

最后运行起来的效果是这样的

来看一下数据库的内容

数据库内容很多，三级联动里的地区名称都在里面，采用的是代号副代号的方式

比如说北京吧，北京的代号是11，它下面的北京市副代号就11， 北京市的主代号是1101，北京市下面的地区副代号就是1101，调地区的时候可以根据主代号查询和它相同的副代号，就能查询出来

用php做省份的三级联动 附带数据库的更多相关文章

  1. 在使用ajax实现三级联动调用数据库数据并通过调出的数据进行二级表单查询

    在使用ajax实现三级联动查询数据库数据后再使用ajax无刷新方式使用三级联动调出的数据进行二级查询 但是现在遇到问题,在二级查询的时候期望是将数据以表格的形式展示在三级联动的下方,但是现在在查询后会 ...

  2. Ajax做无刷新三级联动

    1.引入JS and Jquery包 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  3. Android 省市县 三级联动（android-wheel的使用）[转]

    转载:http://blog.csdn.net/lmj623565791/article/details/23382805 今天没事跟群里面侃大山,有个哥们说道Android Wheel这个控件,以为 ...

  4. Android 省市县 三级联动（android-wheel的使用）

    转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/23382805 今天没事跟群里面侃大山,有个哥们说道Android Wheel这个 ...

  5. ASP.NET 三级联动

    三级联动就是用三个下拉列表框DropDownList,每个里面添加相应的东西,在第一个列表框中选择一个值,第二三个列表框都会根据第一个选择进行相应的变化,在第二个列表框中选择一个值,第三个列表框也会根 ...

  6. AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动；

    js做日期选择: 实现当前年份的前5后5年的日期选择 实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变 扩展功能:天数可以根据闰年平年变化 <body> & ...

  7. 用php+mysql+ajax+jquery做省市区三级联动

    要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates ...

  8. 基于Jquery实现省份、城市、区县三级联动

    前端感觉写的比较少,也是为了练手,下午没事用来写了这个三级联动,也是第一次写这东西. 据我了解,城市信息可以选择存在数据库或者直接写在前端,为了省事,我直接写在前端,下面是我的代码: <!DOC ...

  9. WheelView实现省市区三级联动(数据库实现版本号附带完整SQL及数据)

    近期在实现收货地址功能,用到了省市区三级联动效果,网上找到一般都是xml或json.数据源陈旧改动麻烦.改动了一下使用数据库方式实现了一下 数据源解决.因为数据量比較大通过初始化批量运行SQL的方式不 ...

随机推荐

  1. 遗传算法GA

    遗传算法(Genetic Algorithms,GA)是一种全局优化方法,它借用了生物遗传学的观点,通过自然选择.遗传.变异等作用机制,实现种群中个体适应性的提高,体现了自然界中“物竞天择.适者生存” ...

  2. Java经典案例之-“统计英文字母、空格、数字和其它字符的个数”

    /** * 描述:输入一行字符串,并且统计出其中英文字母.空格.数字和其它字符的个数. * 分析:利用for语句,条件为输入的字符不为 '\n ' * 作者:徐守威 */ package com.xu ...

  3. C# Unity游戏开发——Excel中的数据是如何到游戏中的 （二）

    本帖是延续的:C# Unity游戏开发——Excel中的数据是如何到游戏中的 (一) 上个帖子主要是讲了如何读取Excel,本帖主要是讲述读取的Excel数据是如何序列化成二进制的,考虑到现在在手游中 ...

  4. Scrum

    Scrum[编辑] 维基百科,自由的百科全书   Scrum是一种敏捷软件开发的方法学,用于迭代式增量软件开发过程.Scrum在英语是橄榄球运动中争球的意思. 虽然Scrum是为管理软件开发项目而开发 ...

  5. HTML 5 服务器发送事件、Input 类型、表单元素、表单属性

    HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器 ...

  6. 排名前10的H5、Js 3D游戏引擎和框架

    由于很多人都在用JavaScript.HTML5和WebGL技术创建基于浏览器的3D游戏,所有JavaScript 3D游戏引擎是一个人们主题.基于浏览器的游戏最棒的地方是平台独立,它们能在iOS.A ...

  7. javascript object-oriented something

    http://www.ibm.com/developerworks/cn/web/1304_zengyz_jsoo/ http://www.cnblogs.com/RicCC/archive/2008 ...

  8. Bloom Filter的基本原理和变种

    学习一个东西首先要知道这个东西是什么,可以做什么,接着再了解这个东西有什么好处和优势,然后再学习他的工作原理.下面我们分别从这三点简单介绍一下bloom filter,以及和他的变种. What:在允 ...

  9. loadrunner controller：设置多个load generator

      下面讲一下如何使用多台电脑进行负载测试. 1)         打开load generator,如图所示默认已添加了我们本地的Generator: 2)         点击"Add. ...

  10. 一篇完整的FlexBox布局指南

    一篇完整的FlexBox布局指南 转载请标注本文链接并附带以下信息: 译:Cydiacen 作者:CHRIS COYIER 原文:A Complete Guide to Flexbox 原文更新于 2 ...