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. MyEclipse工具栏的隐藏与显示及自定义

    Myeclipse的工具栏 1.隐藏 工具栏---->右键---->hide toolbar 2.显示     window ----> show toolbar 3.自定义     ...

  2. selenium网页没加载完成就停止加载并自动刷新

    判断一个网页10秒没加载完成就停止加载并自动刷新 driver=webdriver.Chome() driver.set_page_load_timeout(10) while True: try: ...

  3. MySQL数据库（9）_MySQL数据库常用操作命令

    注:刚安装好的MySql包含一个含空密码的root帐户和一个匿名帐户,这是很大的安全隐患,对于一些重要的应用我们应将安全性尽可能提高,在这里应把匿名帐户删除. root帐户设置密码,可用如下命令进行: ...

  4. 前端基础之JavaScript_(5)_DOM对象总结

    DOM 定义了访问和操作HTML文档的标准方法 访问(查找标签) //---- 直接查找 document.getElementById(“idname”) document.getElementsB ...

  5. PAT 天梯赛 L1-043. 阅览室 【STL】

    题目链接 https://www.patest.cn/contests/gplt/L1-043 思路 将每一次 借出和归还 都用 MAP 标记 如果归还的时候 已经被标记过了 那么 ANS ++ 并且 ...

  6. 【Head First Servlets and JSP】笔记15：建立一个JSP页面来显示被访问了多少次

    1.这是一个非常简单的程序,它看起来是这个样子的: 实际功能就是,每访问该页面一次count数加1,在服务器重启前(JVM重启前),这个次数将持续累加. 2.因为这个程序过于简单,所以我希望可以通过H ...

  7. 【Head First Servlets and JSP】笔记5：HttpServletResponse resp

    [HttpServletResponse resp] [由servlet处理响应] 1.一般可以用通过resp获得一个输出流(writer),然后通过输出流将HTML写入响应.例如: resp.set ...

  8. finally中的return

    周五晚6点下班去面试,出了一份笔试题,看到第一题有些蒙了,虽然以前遇到过类似的问题,但并没有留心记一下,觉得没人会这样写代码,但实际上没有面试题中是有的. 1,有在try块中执行不到finally的情 ...

  9. HDU 4783 Clumsy Algorithm

    题意不提. 我们可以发现,可以将最终序列分为对于第i个位置i-pi>=0与i-pi<0种两个子序列.且如果f[n]==g[n],则有两个子序列都递增. 原因是f[n]表示1-n这个排列的逆 ...

  10. poj 3617输出格式问题

    注意是说的80个字母一行....