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. RedisClient For .Net

    Redis Client For .Net 介绍 redis支持各种语言版本的client,其中.net平台下比较火的有ServiceStack.Redis和StackExchange.Redis 选 ...

  2. 剑指offer 面试56题

    面试56题: 题目:数组中数字出现的次数 题:一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. 解题思路: 方法一:异或运算,详见<剑指offer&g ...

  3. PAT 天梯赛 L1-024. 后天 【取余】

    题目链接 https://www.patest.cn/contests/gplt/L1-024 题意 给出一个数,表示星期几,输出后天是星期几 思路 取余的时候要小心点 AC代码 #include & ...

  4. mysql库安装

    如果缺少<mysql/mysql.h> 先安装mysql,然后apt-get install libmysqlclient-dev即可

  5. css系列（7）成品网页

        本节介绍用css和html组合起来写的页面.(代码可以直接运行)     (1)仿旧版腾讯微博注册页面:(文件夹地址:http://files.cnblogs.com/files/MenAng ...

  6. $Java正则表达式基础整理

    (一)正则表达式及语法简介 String类使用正则表达式的几个方法: 正则表达式支持的合法字符: 特殊字符: 预定义字符: 方括号表达式: 圆括号表达式:用于将多个表达式组成一个子表达式,可以使用或运 ...

  7. Vuex的入门教程

    前言 在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用  props 或者 $emit 等方式,详细点击这篇文章查看. 但是如果是大型项目,很多时候都需要在子组件之间传递 ...

  8. 20145210姚思羽《网络对抗》Web基础

    20145210姚思羽<网络对抗>Web基础 实验后回答问题 (1)什么是表单 表但是与用户交互的窗口,负责采集网页中的数据,允许用户在表单中输入信息. (2)浏览器可以解析运行什么语言. ...

  9. JSP语法及内置对象

    JSP全名为Java Server Pages,中文名叫java服务器页面,其根本是一个简化的Servlet设计,它[1]  是由Sun Microsystems公司倡导.许多公司参与一起建立的一种动 ...

  10. 文件系统中跳转【TLCL】

    pwd - Print name of current working directory cd - Change directory ls - List directory contents Lin ...