zoukankan      html  css  js  c++  java
  • 三级联动 案例

    test.php

    <title>无标题文档</title> //载入 jquery, 载入 三级联动js 样式表 <script src="jquery-1.11.2.min.js"></script> <script src="sanji.js"></script> </head> <body> //引用 <div id="sanji"></div> </body> </html>






    sanji.js
    // JavaScript Document
    $(document).ready(function(e) {
        
        //将DIV里面写入三个下拉列表
        $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");
        
        //填充内容
        //1.填充省
        FillSheng();
        //2.填充市
        FillShi();
        //3.填充区
        FillQu();
        
        //如果省选中变化的时候,去填充市和区
        $("#sheng").change(function(){
            
            //改变市
            FillShi();
            //改变区
            FillQu();
            
            })
        //如果市选中变化的时候,去填充区
        $("#shi").change(function(){
            
            //改变区
            FillQu();
            
            })
        
        //填充省的方法
        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);
                    }
                });
        }
        
        
    });







    chuli.php


    <?php
    //取到传过来的父级代号
    $pcode = $_POST["pcode"];
    //引入数据操作类
    include("DBDA.php");
    $db = new DBDA();
    
    //写SQL语句
    $sql = "select AreaCode,AreaName,ParentAreaCode from ChinaStates where ParentAreaCode='{$pcode}'";
    //执行
    echo $db->StrQuery($sql);








    DBDA.php

    <?php
    
    class DBDA
    {
        public $host = "localhost"; //服务器地址
        public $uid = "root"; //数据库的用户名
        public $pwd = "123"; //数据库的密码
        
        //执行SQL语句,返回相应结果的函数
        //$sql是要执行的SQL语句
        //$type是SQL语句的类型,0代表增删改,1代表查询
        //$db代表要操作的数据库
        public function Query($sql,$type=1,$db="mydb")
        {
            //造连接对象
            $conn = new MySQLi($this->host,$this->uid,$this->pwd,$db);
            
            //判断连接是否成功
            !mysqli_connect_error() or die("连接失败!");
            
            //执行SQL语句
            $result = $conn->query($sql);
            
            //判断SQL语句类型
            if($type==1)
            {
                //如果是查询语句返回结果集的二维数组
                return $result->fetch_all();
            }
            else
            {
                //如果是其他语句,返回true或false
                return $result;
            }
        }
        
        //Ajax调用返回JSON
        public function JsonQuery($sql,$type=1,$db="mydb")
        {
            //定义数据源
            $dsn = "mysql:dbname={$db};host={$this->host}";
            //造pdo对象
            $pdo = new PDO($dsn,"{$this->uid}","{$this->pwd}");
    
            
            //准备执行SQL语句
            $st = $pdo->prepare($sql);
            
            //执行预处理语句
            if($st->execute())
            {
                if($type==1)
                {
                    $attr = $st->fetchAll(PDO::FETCH_ASSOC);
                    return json_encode($attr);
                }
                else
                {
                    if($st)
                    {
                        return "OK";
                    }
                    else
                    {
                        return "NO";
                    }
                }
                
            }
            else
            {
                echo "执行失败!";
            }
    
    
    
        }
        //Ajax调用返回字符串
        public function StrQuery($sql,$type=1,$db="mydb")
        {
            //造连接对象
            $conn = new MySQLi($this->host,$this->uid,$this->pwd,$db);
            
            //判断连接是否成功
            !mysqli_connect_error() or die("连接失败!");
            
            //执行SQL语句
            $result = $conn->query($sql);
            
            //判断SQL语句类型
            if($type==1)
            {
                $attr = $result->fetch_all();
                $str = "";
                //如果是查询语句返回字符串
                for($i=0;$i<count($attr);$i++)
                {
                    for($j=0;$j<count($attr[$i]);$j++)
                    {
                        $str = $str.$attr[$i][$j];
                        $str = $str."^";
                    }
                    $str = substr($str,0,strlen($str)-1);
                    $str = $str."|";
                }
                $str = substr($str,0,strlen($str)-1);
                
                return $str;
            }
            else
            {
                //如果是其他语句,返回true或false
                if($result)
                {
                    return "OK";
                }
                else
                {
                    return "NO";
                }
            }
        }
        
        
    }
  • 相关阅读:
    SpreadJS 复制行
    RookeyFrame 模块 线上创建的模块 迁移到 线下来
    RookeyFrame 附件 上传附件
    RookeyFrame 字典 新增和绑定
    RookeyFrame Bug 表单管理 -> 查看表单 ->编辑字段页面 JS报错
    Catalan数
    美元汇率
    5倍经验日
    二分查找的边界问题
    线段覆盖5
  • 原文地址:https://www.cnblogs.com/kevin2016/p/5517024.html
Copyright © 2011-2022 走看看