原生js和php、mysql写三级联动

最新推荐文章于 2021-03-27 11:51:40 发布

原创最新推荐文章于 2021-03-27 11:51:40 发布 · 448 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端，三级联动 #php #mysql

笔记专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个基于HTML、CSS和JavaScript的三级联动下拉菜单实现方法，包括前端页面布局、交互逻辑及后端数据处理。通过前后端配合，实现了省份、城市、区县的联动选择。

这里是html代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        select {
            width: 180px;
            height: 30px;
            margin: 100px 0;
        }

        div {
            margin: 0 auto;
            width: 600px;
        }
    </style>
</head>

<body>
    <div>

        <select class="shen" name="" id="">
            <option>请选择</option>
        </select>
        <select class="shi" name="" id=""></select>
        <select class="qu" name="" id=""></select>

    </div>
</body>
<script src="三级联动.js"></script>

</html>

这里是js代码：

var shen = document.querySelector('.shen');
var shi = document.querySelector('.shi');
var qu = document.querySelector('.qu');
var shenindex = 0;
var shiindex = 0;
var privinceCode = [];//存放省和编码的数组
var cityCode = [];//存放市和编码的数组
var quCode = [];//存放区和编码的数组，但是由于联动的原因，实际上我存放的是市的编码


window.onload = function () {
    var xhr = new XMLHttpRequest;//创建xhr对象
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                // console.log(xhr.responseText);
                var shenList = JSON.parse(xhr.responseText);//解析后台返回的数据
                for (let i = 0; i < shenList.length; i++) {
                    shen.options.add(new Option(shenList[i].SHORT_NAME));//在指定位置创建新的option
                    privinceCode.push([shenList[i].PROVINCE_CODE, shenList[i].SHORT_NAM]);//把经过处理的数据放进省数组中
                }
            }
        }
    }
    xhr.open('get', '三级联动.php?type=0', true);
    xhr.send(null);//发送无参的get请求
}

shen.onchange = function () {//省的option状态改变触发
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                var shiList = JSON.parse(xhr.responseText);
                shenindex = shen.selectedIndex - 1;
                shi.options.length = 0;
                qu.options.length = 0;
                if (cityCode.length == 0) {
                    for (let j = 0; j < shiList.length; j++) {
                        cityCode.push([shiList[j].CITY_CODE, shiList[j].CITY_NAME]);//将后台返回的城市名字 和编码存储到citycode数组中
                    }
                }
                if (shenindex == -1) {//未选择，市，区数据清空
                    shi.options.length = 0;
                    qu.options.length = 0;
                } else {
                    var shenValue = shen.options[shen.selectedIndex].value;
                    // console.log(shenValue);
                    //把数组中的城市编码给shenValue用来做联动使用
                    for (let a = 0; a < privinceCode.length; a++) {
                        if (privinceCode[a][1] == shenValue) {
                            shenValue = privinceCode[a][0];//把省的编码赋值给获取的shenValue
                            // console.log(shenValue)
                        }
                    }
                    for (let k = 0; k < cityCode.length; k++) {
                        if (shenValue.slice(0, 2) == cityCode[k][0].slice(0, 2)) {//如果省的前三位==市数组[k]的第一位也就是编码的前三位相等的话，把市数组的第二位添加到市的option里
                            shi.options.add(new Option(cityCode[k][1]));
                        }
                    }



                    var xhr1 = new XMLHttpRequest();
                    xhr1.onreadystatechange = function () {
                        if (xhr1.readyState == 4) {
                            if (xhr1.status == 200) {
                                qu.options.length = 0;
                                var quList = JSON.parse(xhr1.responseText);


                                if (quCode.length == 0) {
                                    for (let i = 0; i < quList.length; i++) {
                                        // qu.options.add(new Option(quList[i].AREA_NAME));
                                        quCode.push([quList[i].CITY_CODE, quList[i]
                                            .AREA_NAME
                                        ]) //添加数据到quCode中

                                    }
                                }

                                var shiValue = shi.options[shi.selectedIndex].value;//第一个市的值
                                var shiName = shi.options[shi.selectedIndex].value;//第一个市的名字
                                for (let a = 0; a < cityCode.length; a++) {
                                    for (let b = 0; b < cityCode[a].length; b++) {
                                        if (shiName == cityCode[a][1]) {//如果名字和数组中第二位相等
                                            shiValue = cityCode[a][0];//把数组中的城市编码给shiValue用来做联动使用
                                        }
                                    }
                                }
                                for (let a = 0; a < quCode.length; a++) {
                                    if (shiValue == quCode[a][0])
                                        qu.options.add(new Option(quCode[a][1]))
                                }
                                // console.log(shiValue)
                                // console.log(shiName)



                            }
                        }
                    }
                    xhr1.open('get', '三级联动.php?type=2', true);
                    xhr1.send(null);
                }
            }
        }
    }
    xhr.open('get', '三级联动.php?type=1', true);
    xhr.send(null);


}
shi.onchange = function () {
    qu.options.length = 0;
    var shichangev = shi.options[shi.selectedIndex].value;//选中的是哪一个市
    console.log(shichangev)

    for (var a = 0; a < cityCode.length; a++) {
        if (cityCode[a][1] == shichangev) {如果市名相等的话，那么把所对应市的编码赋值给shichangv
            shichangev = cityCode[a][0];
            // console.log(shenValue)
        }
    }
    for (let k = 0; k < quCode.length; k++) {
        if (shichangev == quCode[k][0]) {//如果shichangv的编码和quCode数组[k]第一个位的编码相同的话，把对应的区添加到qu中。
            qu.options.add(new Option(quCode[k][1]));
        }
    }
}

这里是php：

<?php

//建立数据库链接
// echo "<pre>";
// sleep(3);
$con = mysqli_connect('localhost', 'root', '', 'maplist');
//设置本次链接编码格式
if ($con) {
    mysqli_query($con, 'set names utf8');
    mysqli_query($con, 'set character_set_client=utf8');
    mysqli_query($con, 'set character_set_results=utf8');
    //编写sql语句
    $type = $_GET['type'];
    // $type = 2 ;
    if ($type == 0) {
        $sqlShen = "select * from bs_province where 1";
        $result = $con->query($sqlShen);
        // print_r($result);
        if ($result->num_rows > 0) {
            $shenList = [];
            for ($i = 0; $row = $result->fetch_assoc(); $i++) {
                // print_r($row);
                $shenList[$i] = $row;
            }
            // print_r($shenList);
            echo json_encode($shenList);
        }
    }
    else if ($type == 1) {
        $sqlCity = "select * from bs_city where 1";
        $result = $con ->query($sqlCity);
        if($result->num_rows > 0){
            $shiList = [] ;
            for ($i = 0; $row = $result->fetch_assoc(); $i++) {
                // print_r($row);
                $shiList[$i] = $row;
            }
        }
        // print_r($shiList);
        echo json_encode($shiList);
    }else if($type ==2){
        $sqlQu = "select CITY_CODE,AREA_NAME from bs_area where 1";
        $result = $con ->query($sqlQu);
        if($result ->num_rows >0){
            $quList = [] ;
            for ($i = 0; $row = $result->fetch_assoc(); $i++) {
                // print_r($row);
                $quList[$i] = $row;
            }
            // print_r($quList);
            echo json_encode($quList);
        }
        // echo json_encode($quList);
       
    }


}

问题很多，比如查询数据库的时候前两次没有选择特定的字段进行返回，导致返回的数据太多无用信息，第三次返回选择了字段，处于时间考虑没有去更改之前的sql语句，其实就是懒，数据库连接也没有进行事务处理，和太多的判断，前端数据处理逻辑存在很多问题。但是联动功能已经可以实现。