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. springboot springmvc 支持 https

    Spring Mvc和Spring Boot配置Tomcat支持Https 背景 最近在项目开发中需要让自己的后端Restful接口支持https,在参考了很多前辈们的博客后总结了一些. Spring ...

  2. 一个Browser的HTTP请求（一）

    本文主要是分析一个简单的web服务器是如何工作的. 若有不恰当或不对之处,请指正! Tomcat和web服务器的关系 我们常说Tomcat是一个web容器,也常说用户通过浏览器向web服务器进行请求, ...

  3. 小数据池、is 和 ==的区别

    小数据池,在一定情况下出现内存共享(只有int  和 str 才有的)   is 和 ==的区别 id()     打印数据的地址 a  = 'hello' b = 'hello' print(a = ...

  4. $Android自定义控件在不同状态下的属性

    在写代码的时候,有时候需要控件在不同状态下显示不同的外观,比如在按钮按下的时候要变颜色,EditText获取焦点时候边框要变颜色等.那么下面就来梳理一下这些是怎么实现的. (一)按钮按下时候变颜色 1 ...

  5. Android 平台电容式触摸屏的驱动基本原理

    Android 平台电容式触摸屏的驱动基本原理 Android 平台电容式触摸屏硬件基本原理 Linux 与 Android 的多点触摸协议 Linux输入子系统:事件的编码

  6. Shell编程之for和select循环

    一.for和select循环 1.for循环语法 for 变量名 in 变量取值列表 do 指令... done C语言型for循环 for ((exp1; exp2; exp3)) do 指令... ...

  7. hadoop程序在本地模式调试作业

    1.首先下载cygwin,例如安装在该目录下,D:\Program Files\cygwin\ 2.copy linux上的jar包到D:\Program Files\cygwin\home\lib ...

  8. python补充知识点

    1. 在python2中用xrange,在python3中直接使用range就好了 2. 常数 None在逻辑判断的时候指代False,其他方式不代表True或者False 3. for循环只作用域容 ...

  9. 斯坦福机器学习视频笔记 Week9 异常检测和高斯混合模型 Anomaly Detection

    异常检测,广泛用于欺诈检测(例如“此信用卡被盗?”). 给定大量的数据点,我们有时可能想要找出哪些与平均值有显着差异. 例如,在制造中,我们可能想要检测缺陷或异常. 我们展示了如何使用高斯分布来建模数 ...

  10. Python 循环的综合应用

    # 循环综合应用1. # str = "hello,world" 把字符串给反转显示 str = "hello,world" temp = "&quo ...