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

来看一下怎么来做

先来写个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. Dictionary使用（转）

    1.要使用Dictionary集合,需要导入C#泛型命名空间 System.Collections.Generic(程序集:mscorlib)2.描述 1).从一组键(Key)到一组值(Value)的 ...

  2. Java JDBC连接SQL Server2005错误：通过端口 1433 连接到主机 localhost 的 TCP/IP 连接失败 及sql2008外围服务器

    转载:Java JDBC连接SQL Server2005错误:通过端口 1433 连接到主机 localhost 的 TCP/IP 连接失败 错误原因如下: Exception in thread & ...

  3. PHP 合并数组 追加数组例子

    PHP合并数组我们可以使用array_merge()函数,array_merge()函数返回一个联合的数组.所得到的数组以第一个输入数组参数开始,按后面数组参数出现的顺序依次追加.其形式为: arra ...

  4. social relation & recommender system

    由于社交网络盛行,现在许多关于推荐系统的研究都考虑了如何使用social relation来改进推荐系统.虽然有很多论文都成功的使用social relation改进了推荐效果,然而,也有一些尝试失败 ...

  5. Delphi操作XML

    Delphi操作XML Delphi操作XMl,只要使用 NativeXml.我是用的版本是4..NativeXML的使用方法比较简单,但是功能很强大. XE2的话,要在simdesign.inc后面 ...

  6. spring框架学习（三）junit单元测试

    spring框架学习(三)junit单元测试 单元测试不是头一次听说了,但只是听说从来没有用过.一个模块怎么测试呢,是不是得专门为一单元写一个测试程序,然后将测试单元代码拿过来测试? 我是这么想的.学 ...

  7. 7-1 vim 编辑器

    1. vi:visual interface. 1. vim:vi improved 这些都属于全屏编辑器,又是模式化编辑器 vim模式(3种) 编辑模式(命令模式) 输入模式 末行模式 模式转换 编 ...

  8. C# 从字符串向 datetime 转换时失败

    更改电脑的日期类型即可,把短日期和长日期修改下面的样子即可:

  9. MAC的VIMRC

    set nocompatible            " 关闭 vi 兼容模式 syntax on                   " 自动语法高亮 " color ...

  10. 【js 编程艺术】小制作二

    首先是一个html文档 /* explanation.html */<!DOCTYPE html> <html> <head> <meta charset=& ...