jquery ajax 下拉列表三级联动

超、凢脫俗 2021-06-26 16:06 523阅读 0赞

![在这里插入图片描述][20190803222142964.png]  
![在这里插入图片描述][2019080322215935.png]  
![在这里插入图片描述][20190803223020383.png]  
如上图效果 ，通过`ajax`从数据库传输出地域信息，需要用的`chinastates`数据表如下图所示：  
![在这里插入图片描述][20190803223249832.png]  
具体是代码如下：

复制代码

diqu.js:

// JavaScript Document
    $(document).ready(function(e) { 
        
        //往ID为diqu的DIV扔三个下拉
        $("#diqu").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");
        
        //往省份的下拉里面填充数据
        LoadSheng();
        //加载市
        LoadShi();
        //加载区
        LoadQu();
        
        //给省的下拉加变的事件
        $("#sheng").change(function(){ 
            //加载市
            LoadShi();
            //加载区
            LoadQu();
        })
        //给市的下拉加变的事件
        $("#shi").change(function(){ 
            //加载区
            LoadQu();
        })
        
    });
    
    //加载省的方法
    function LoadSheng(){ 
        var pcode = "0001"; //父级代号
        $.ajax({ 
            async:false,
            url:"load.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 LoadShi(){ 
        var pcode = $("#sheng").val(); //父级代号
        $.ajax({ 
            async:false,
            url:"load.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 LoadQu(){ 
        var pcode = $("#shi").val(); //父级代号
        $.ajax({ 
    　　　　　async:false,　
            url:"load.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);
            }
        });
    }

`diqu.js`总结：

要点：  
1.给省 市添加`change`事件，内容改变时，重新加载下级下拉列表的选项

$("#sheng").change(function(){ 
            //加载市
            LoadShi();
            //加载区
            LoadQu();
        })
        //给市的下拉加变的事件
        $("#shi").change(function(){ 
            //加载区
            LoadQu();
        })
        
    });

2.为了返回数据方便，我们把查询的地名用 `代号^地名|代号^地名|代号^地名` 的形式拼接起来的，所以要把返回的数据进行拆分

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

load.php:

<?php
    require_once "../crud/DBDA.class.php";
    $db = new DBDA();
    $pcode = $_POST["pcode"];
    $sql = "select * from chinastates where parentareacode='{ $pcode}'";
    echo $db->strquery($sql);

DBDA.class.php:

<?php
    class DBDA{ 
        public $host="localhost"; //服务器地址
        public $uid="root"; //用户名
        public $pwd="123"; //密码
        public $dbname="weibo"; //数据库名称 
        /* 执行一条SQL语句的方法 @param sql 要执行的SQL语句 @param type SQL语句的类型，0代表查询 1代表增删改 @return 如果是查询语句返回二维数组，如果是增删改返回true或false */
        public function query($sql,$type=0){ 
            $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
            $result = $db->query($sql);
            if($type){ 
                return $result;
            }else{ 
                return $result->fetch_all();
            }
        }
        //返回字符串的方法
        public function strquery($sql,$type=0){ 
            $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
            $result = $db->query($sql);
            if($type){ 
                return $result;
            }else{ 
                //return $result->fetch_all();
                $arr = $result->fetch_all();
                $str = "";
                foreach($arr as $v){ 
                    $str .= implode("^",$v)."|";
                    }
                $str = substr($str,0,strlen($str)-1);
                return $str;
            } 
            }

[20190803222142964.png]: /images/20210626/0c4f18addc9248dc968dd7a26be6cca5.png
[2019080322215935.png]: /images/20210626/c20293e9d2e246edba7ff51deba53065.png
[20190803223020383.png]: /images/20210626/4bf2ef605b184672800a29a65022ed77.png
[20190803223249832.png]: /images/20210626/4dc6a76a3ef64ce08fbf74d3821a3c25.png