省市区三级联动插件：

主页面：为方便使用，不用写过多代码，只写一个id为sanji的div，若别的页面要用，只需写一个id为sanji的div，加载上jQuery与sanji.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页面实现三级联动:

// JavaScript Document

//省、市、区三级联动

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

    $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>")

    //填充内容

    //1.填充省

    FillSheng();

    //Fill("0001",sheng);

    //2.填充市

    FillShi();

    //Fill($("#sheng").val(),shi);

    //3.填充区

    FillQu();

    //Fill($("#shi").val(),qu);

    //如果省选中变化的时候，去填充市和区

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

        //改变市

        FillShi();

        //Fill($("#sheng").val(),"shi");

        //改变区

        FillQu();

        //Fill($("#shi").val(),"qu");

        })

    //如果市选中变化的时候，去填充区

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

        //改变区

        FillQu();

        //Fill($("#shi").val(),"qu");

        })

    //填充省的方法

    function FillSheng()

    {

        //找到父级代号

        var pcode = "0001";

        //调用AJAX

        $.ajax({

            async:false,

            url:"ChuLi.php",

            data:{pcode:pcode},

            type:"POST",

            dataType:"TEXT",

            success: function(data){

                var str = "";

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

                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

        $.ajax({

            async:false,

            url:"ChuLi.php",

            data:{pcode:pcode},

            type:"POST",

            dataType:"TEXT",

            success: function(data){

                var str = "";

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

                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

        $.ajax({

            async:false,   //区在最后面，不同步也没问题

            url:"ChuLi.php",

            data:{pcode:pcode},

            type:"POST",

            dataType:"TEXT",

            success: function(data){

                var str = "";

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

                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

//取到传过来的父级代号

$pcode = $_POST["pcode"];

//引入操作数据库

include("../DB.class.php");

$db = new DB();

//写SQL语句

$sql = "select AreaCode,AreaName,ParentAreaCode from ChinaStates where ParentAreaCode = '{$pcode}'";

//执行

echo $db->StrQuery($sql);

AJAX实现三级联动的更多相关文章

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

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

  2. ajax 实现三级联动

    ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如 ...

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

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

  4. ajax 实现三级联动下拉菜单

    ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如 ...

  5. PHP ajax 实现三级联动

    在一个单独JS页面中,利用ajax实现三级联动,做成一个三级联动形式,以便于以后随时调用 JS代码: $(document).ready(function(e) { $("#sanji&qu ...

  6. ajax省市区三级联动

    jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博 ...

  7. 完整的Ajax及三级联动小练习

    Ajax结构: var name = $("#text_1").val(); $.ajax({ url: "Ashxs/Handler.ashx",//一般处理 ...

  8. Ajax实现三级联动(0520)

    查询数据库中的chinastates表,通过父级代号查询相应省市区. 实现界面: 在js页面实现三级联动 在JQuery中调用Ajax方法(引用JQuery文件一定放在最上面) 用插件的形式,创建三个 ...

  9. php+ajax的三级联动下拉菜单

    封装一个三级联动,就可以在任何页面进行引用了 先写个页面引用一下这个js <head> <meta http-equiv="Content-Type" conte ...

  10. 基于jQuery的AJAX实现三级联动菜单

    最近学习jQuery,所以就写了一个关于中国省市县/区的三级联动菜单,权当相互学习,相互促进,特此记录. 下面是嵌套js的html文件: <!DOCTYPE html> <html ...

随机推荐

  1. iconv c 代码学习

    (struct stringpool_t *)0)->stringpool_str15 含义为: 1.创建一个结构体stringpool_t 指针(struct stringpool_t *) ...

  2. spring过滤器和拦截器的区别和联系

    一 简介 (1)过滤器: 依赖于servlet容器,是JavaEE标准,是在请求进入容器之后,还未进入Servlet之前进行预处理,并且在请求结束返回给前端这之间进行后期处理.在实现上基于函数回调,可 ...

  3. android学习十四（android的接收短信）

    收发短信是每一个手机主要的操作,android手机当然也能够接收短信了. android系统提供了一系列的API,使得我们能够在自己的应用程序里接收和发送短信. 事实上接收短信主要是利用我们前面学过的 ...

  4. Hibernate使用Log4j日志记录(使用xml文件)

    日志记录使程序员能够将日志详细信息永久写入文件. Log4j和Logback框架可以在hibernate框架中使用来支持日志记录. 使用log4j执行日志记录有两种方法: 通过log4j.xml文件( ...

  5. Python Theano TypeError: Cannot convert Type TensorType(float64, vector) (of Variable Subtensor{int64:int64:}.0) into Type TensorType(float64, matrix)

    参考: https://groups.google.com/forum/#!topic/theano-users/teA-07wOFpE 这个问题出现的原因是,我在读文件的时候,应该Train_X读成 ...

  6. js 数组容易弄混的那些方法

    js数组中 我们很多数组的方法都知道其中的含义 但是每一次用的都不是很顺手 下边我给大家写了一个小小的demo 来理解那些 近似”双胞胎“的东西 // splice方法 var a=[1,2,3,4, ...

  7. linq to sql 动态构建查询表达式树

    通过Expression类进行动态构造lamda表达式. 实现了以下几种类型,好了代码说话: public Expression<Func<T, bool>> GetAndLa ...

  8. Asp.net在页面间传递大量数据(数据表)建议采用的方法

    能让数据在 两个不同站点之间传递吗? 我现在是想A站点的数据 传递到B站点....... 建议使用Cache (1)不太影响程序性能不太可能,你都说了,是大量数据.我举个例子,你是从A.aspx传到B ...

  9. javascript拼接html代码

    转自开源中国社区:http://www.oschina.net/code/snippet_94055_21640经常做jsp开发的朋友可能遇到一个情况,显示列表数据不是table,而是div或者其他很 ...

  10. Nginx敏感信息泄露漏洞（CVE-2017-7529）

    2017年7月11日,为了修复整数溢出漏洞(CVE-2017-7529), Nginx官方发布了nginx-1.12.1 stable和nginx-1.13.3 mainline版本,并且提供了官方p ...