AJAX实现三级联动

省市区三级联动插件：

主页面：为方便使用，不用写过多代码，只写一个id为sanji的div，若别的页面要用，只需写一个id为sanji的div，加载上jQuery与sanji.js文件即可

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

在JS页面实现三级联动:

// JavaScript Document

//省、市、区三级联动

$(document).ready(function(e) {

    $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>")

    //填充内容

    //1.填充省

    FillSheng();

    //Fill("0001",sheng);

    //2.填充市

    FillShi();

    //Fill($("#sheng").val(),shi);

    //3.填充区

    FillQu();

    //Fill($("#shi").val(),qu);

    //如果省选中变化的时候，去填充市和区

    $("#sheng").change(function(){

        //改变市

        FillShi();

        //Fill($("#sheng").val(),"shi");

        //改变区

        FillQu();

        //Fill($("#shi").val(),"qu");

        })

    //如果市选中变化的时候，去填充区

    $("#shi").change(function(){

        //改变区

        FillQu();

        //Fill($("#shi").val(),"qu");

        })

    //填充省的方法

    function FillSheng()

    {

        //找到父级代号

        var pcode = "0001";

        //调用AJAX

        $.ajax({

            async:false,

            url:"ChuLi.php",

            data:{pcode:pcode},

            type:"POST",

            dataType:"TEXT",

            success: function(data){

                var str = "";

                var hang = data.split("|");

                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

        $.ajax({

            async:false,

            url:"ChuLi.php",

            data:{pcode:pcode},

            type:"POST",

            dataType:"TEXT",

            success: function(data){

                var str = "";

                var hang = data.split("|");

                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

        $.ajax({

            async:false,   //区在最后面，不同步也没问题

            url:"ChuLi.php",

            data:{pcode:pcode},

            type:"POST",

            dataType:"TEXT",

            success: function(data){

                var str = "";

                var hang = data.split("|");

                for(var i=0;i<hang.length;i++)

                {

                    var lie = hang[i].split("^");

                    str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";

                }

                $("#qu").html(str);

                }

            });

    }

处理页面：

<?php

//取到传过来的父级代号

$pcode = $_POST["pcode"];

//引入操作数据库

include("../DB.class.php");

$db = new DB();

//写SQL语句

$sql = "select AreaCode,AreaName,ParentAreaCode from ChinaStates where ParentAreaCode = '{$pcode}'";

//执行

echo $db->StrQuery($sql);

AJAX实现三级联动-LMLPHP