1.引入JS and Jquery包

<!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>

2.JS包代码

// JavaScript Document

$(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);

                }

        });

}

3.PHP处理页面

<?php

include("DBDA.class.php");

$db = new DBDA();

$pcode = $_POST["pcode"];

$sql = "select * from chinastates where parentareacode='{$pcode}'";

echo $db->StrQuery($sql);

Ajax做无刷新三级联动的更多相关文章

  1. JQuery中国省市区无刷新三级联动查询

    之前有写过用<Ajax控件来实现中国的省市区无刷新查询> 今天用JQuery来实现,用Ajax控件和JQuery的优缺点就先不说了. 效果图如下: 下面来结合代码来详细说明一下如何用JQu ...

  2. Hibernate+DWR无刷新三级联动

    DWR(Direct Web Remoting)是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架,可以帮助开发人员开发包含AJAX技术的网站.它可以允许在浏览器里的代码使用运行在 ...

  3. Hibernate+struts+JqueryAjax+jSON实现无刷新三级联动

    看网上JqueryAjax三级联动的例子讲不是很全,代码也给的不是很全,给初学者带来一定的难度.小弟自己写了一个,可能有些地方不是很好,希望大家能够提出建议. 用的是Hibernate+struts2 ...

  4. Ajax做无刷新分页

    1.主页面代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  5. ajax实现无刷新两级联动DropDownList

    ajax实现的无刷新三级联动 http://zhangyu028.cnblogs.com/articles/310568.html 本文来自小山blog:http://singlepine.cnblo ...

  6. 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

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

  7. 使用ajax实现无刷新改变页面内容

    如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" ...

  8. jsp+ajax实现无刷新

    jsp+ajax实现无刷新,鼠标离开文本框即验证用户名 jsp+ajax实现无刷新,鼠标离开文本框即验证用户名(本功能多用于注册) input.jsp(表单提交页面): %@ page content ...

  9. window.history.pushState与ajax实现无刷新更新页面url

    ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history ...

随机推荐

  1. Spark架构解析(转)

    Application: Application是创建了SparkContext实例对象的Spark用户,包含了Driver程序, Spark-shell是一个应用程序,因为spark-shell在启 ...

  2. pandas（零）数据结构

    pandas的两个主要的数据结构: Series series是一种类似于一维数组的对象,它由一组数据(NumPy数组类型的数据)和一组与之相关的数据标签(索引)组成. from pandas imp ...

  3. windows安装pywin32

    下载旧版 https://sourceforge.net/projects/pywin32/files/pywin32/ 下载新版 https://github.com/mhammond/pywin3 ...

  4. CRC冗余校验码的介绍和实现

    from:http://yoyo.play175.com/p/200.html 节选至百度百科: 首先,任何一个由二进制数位串组成的代码,都可以惟一地与一个只含有0和1两个系数的多项式建立一一对应的关 ...

  5. iOS UIScrollView 滚动到当前展示的视图居中展示

    需求展示: 测试效果1 first uiscrollView  宽度 为屏幕宽度   滚动步长 为 scroll 宽度的1/3   分析: 这个是最普通版 无法使每一次滚动的结果子视图居中展示, WA ...

  6. api token

    具体实现如下: 1. api请求客户端想服务器端一次发送用用户认证信息(用户名和密码),服务器端请求到改请求后,验证用户信息是否正确. 如果正确:则返回一个唯一不重复的字符串(一般为UUID),然后在 ...

  7. 【leetcode刷题笔记】Surrounded Regions

    Given a 2D board containing 'X' and 'O', capture all regions surrounded by 'X'. A region is captured ...

  8. 无线路由：关于WDS,Repeater等模式的说明

    转:http://blog.csdn.net/lizhiqiang5846/article/details/38397803 当今如果不用无线路由连接宽带似乎是很不popular了,当然Wifi/WL ...

  9. 如何隐藏tomcat命令窗口

    有两种方法: 一.修改tomcat中的文件参数,达到隐藏目的: 引用:TOMCAT_HOME\bin\setclasspath.bat 在文件的底部找到以下内容: set _RUNJAVA=" ...

  10. centos iscsi 配置

    首先是服务器的设置:[root@localhost 桌面]# yum install scsi-target-*  -y     安装服务  配置yum的方法太简单了,我就不写了[root@local ...