jquery ajax 下拉列表三级联动

最新推荐文章于 2020-12-24 03:03:23 发布

转载最新推荐文章于 2020-12-24 03:03:23 发布 · 621 阅读

6 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/WuLex

Jquery及其组件专栏收录该内容

147 篇文章

订阅专栏

本文介绍了一种使用Ajax和jQuery实现省市县三级联动下拉框选择器的方法。通过从数据库加载地区信息，动态更新下拉选项，实现了用户友好的地域选择功能。

在这里插入图片描述

如上图效果，通过ajax从数据库传输出地域信息，需要用的chinastates数据表如下图所示：

具体是代码如下：

<script src="../crud/bootstrap/js/jquery-1.11.2.min.js"></script>
<script src="diqu.js"></script>
</head>

<body>

<div id="diqu"></div>

</body>

复制代码

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;
        } 
        }