Jquery Ajax + php 三级联动实例

sanji.php

<!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" />
<script src="../jquery-2.2.2.min.js"></script>
<script src="sanji.js"></script>
<title>无标题文档</title>
</head>

<body>

<h1>三级联动</h1>

<div id="sj"></div>
</body>
</html>

sanji.js

// JavaScript Document
$(document).ready(function(e) {

    //在DIV里造下拉菜单
    $("#sj").html("<select id=‘sheng‘></select><select id=‘shi‘></select><select id=‘qu‘></select>");

    //填充数据
    FillSheng();  //填充省的数据
    FillShi();      //填充市的数据
    FillQu();        //填充区的数据

            //填充省的方法
                function FillSheng()
    {
        var code = "0001";  //省的父级代号

        $.ajax({

            url:"chuli.php",
            data:{code:code},
            type:"POST",
            dataType:"TEXT",
            async:false,
            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>";
                    }

                    //把所有<option>放到省的下拉列表里
                    $("#sheng").html(str);

                                    }

                })

    }

            //填充市的方法
            function FillShi()
    {
        var code = $("#sheng").val();  //市的父级代号

        $.ajax({

            url:"chuli.php",
            data:{code:code},
            type:"POST",
            dataType:"TEXT",
            async:false,
            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>";
                    }

                    //把所有<option>放到市的下拉列表里
                    $("#shi").html(str);

                                    }
                })

    }

            //填充区的方法
            function FillQu()
    {
        var code = $("#shi").val();  //区的父级代号

        $.ajax({

            url:"chuli.php",
            data:{code:code},
            type:"POST",
            dataType:"TEXT",
            async:false,
            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>";
                    }

                    //把所有<option>放到区的下拉列表里
                    $("#qu").html(str);

                                    }
                })

    }

    //当省发生改变的时候，市和区一起变
    $("#sheng").change(function() {

        FillShi();
        FillQu();
    });

    //当市发生改变的时候，区一起变
    $("#shi").change(function() {

        FillQu();

    });

});

chuli.php

<?php

include("../DBDA.php");

$con = new DBDA();

$pcode = $_POST["code"];

$sql = "select AreaCode,AreaName from chinastates where ParentAreaCode = ‘{$pcode}‘";

echo $con->Query_string($sql);

?>

时间： 2024-10-25 04:46:07

Jquery Ajax + php 三级联动实例的相关文章

ASP.NET webform开发中基于Jquery,AJAX的三级联动

主要html代码 <select id="province"> <option value="0">--请选择省份--</option> </select> <select id="city"> <option value="0">--请选择城市--</option> </select> <select id="ar

用jQuery,ajax,实现三级联动封装JS的文件

// JavaScript Document $(document).ready(function(e) { //找到ID=SANJI的DIV,造三个下拉扔进去 var str = "<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"; $("#sanji").html(str); //

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

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates表查询 Ajax加载数据 1.这是chinastates表 2.做一个简单php:Ajax_eg.php <!DOCTYPE html><html> <head> <meta c

JQuery+Ajax实战三级下拉列表联动（八）

本片文章为练习,项目中不会这样写: 一:涉及到的知识点: jQuery Dom操作 jQuery Ajax操作 ASP.net中的json操作二:用了自动代码生成器 1.Dal层的代码: public static partial class BranchTwoService { /// <summary> /// 根据一级机构的ID得二级机构列表 /// </summary> /// <param name="branchOneId">1级机构I

jQuery实现select三级联动

参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQuery实现点击式选项卡jQuery实现select三级联动效果 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 4

用jQuery实现省市区三级联动（可做插件）

用jQuery实现省市区三级联动(可做插件) 有参考别的文档,如有雷同,不胜感激先上效果图上三级联动代码 city.html <!DOCTYPE html> <html> <head> <title>city.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http

PHP ajax 实现三级联动

在一个单独JS页面中,利用ajax实现三级联动,做成一个三级联动形式,以便于以后随时调用 JS代码: 1 $(document).ready(function(e) { 2 $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"); 3 4 //填充内容

jQuery Ajax： $.post请求实例

jQuery Ajax: $.post请求实例 leyangjun.html页面 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="./jquery-2.0.0.min.js"></scri

AJAX省市区三级联动下拉列表实现 JAVA开发

转载自:http://blog.sina.com.cn/s/blog_a48af8c001011lx1.html 例子--District Picker http://fengyuanchen.github.io/distpicker/ 此小程序的功能主要是采用异步请求方式从数据库中调取省市区信息显示到下拉列表: 代码如下: 建立数据库中的代码和一些配置文件信息就省略了,主要有JavaScript中的代码为: $(document).ready(function(){