三级联动下拉菜单式

①sanji2.php 主页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-1.11.2.min.js"></script>
    <script src="sanji2.js"></script>
</head>
<body>
    <h1>三级联动</h1>
    <div id="sanji"></div>
</body>
</html>

②sanjichuli2.php

<?php 
include("../DBDA.php");
$db=new DBDA();
$pcode=$_POST["code"];
$sql="select * from ChinaStates where ParentAreaCode='{$pcode}'";
echo $db->Ajaxquery($sql);
 
 ?>

③sanji2.js

$(document).ready(function(e){
    //在div里面造三个下拉
    $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");
    //填充数据
    Fillsheng(); //填充省的数据
    Fillshi();    //填充市的数据
    Fillqu();    //填充区的数据
    //同步异步
    //同步是指在Ajax处理数据的时候，必须等到处理完才能执行下面的语句，
    //异步是在Ajax处理数据的时候，不用等到处理完，下面的语句就可以执行
    //同步在交换信息的时候，必须等到对方确认之后再发送一条
    //异步在交换信息的时候，只管向对方发送，不用管对方有没有答复
    //表现在线程上，同步相当于单线程处理一个请求，异步相当于多线程同时处理多个数据
    //当省的选中发生变化的时候，去改变市和区
    $("#sheng").change(function(){
                Fillshi();
                Fillqu();
    })
    $("#shi").change(function(){
            Fillqu();
    })
    //填充省的方法
        function Fillsheng()
        {
            var code="0001";//省的父级代号
            $.ajax({
                async:false,//默认true是异步   false是同步
                url:"sanjichuli2.php",
                data:{code:code},
                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 code=$("#sheng").val();//市的父级代号 ???
            $.ajax({
                async:false,
                url:"sanjichuli2.php",
                data:{code:code},
                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 code=$("#shi").val();//市的父级代号 ???
            $.ajax({
                async:false,
                url:"sanjichuli2.php",
                data:{code:code},
                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);
                }
            });

        }
        

});

相关阅读:
2015个人年度总结
 矢量图标的使用
 onsrcoll和scrollTop兼容与实现
 我们，曾是阿里宝宝
 linux 基本操作笔记
 认识与学习shell
两道有趣的面试题
 使用css保持一定宽高比例
 我在超级课程表实习的那个月
 3、4月学习总结，如愿阿里前端实习生
原文地址：https://www.cnblogs.com/zhanghaozhe8462/p/5523410.html

三级联动 下拉菜单式

三级联动下拉菜单式