基于jQuery的AJAX实现三级联动菜单

Qing

2023-5-2

效果图

废话不多说，先看效果图

代码

html代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link href="./css/index.css" rel="stylesheet" type="text/css" />
    <script src="./js/index.js"></script>
    <title>基于jQuery的AJAX实现三级联动菜单</title>
</head>

<body>
    <div>

        <div class="card">

            <form class="form">
                <span><b>省 份:</b></span>
                <select name="province" id="province">
                    <option value="0">--请选择--</option>
                </select>
                <span><b>城 市:</b></span>
                <select name="city" id="city">
                    <option value="0">--请选择--</option>
                </select>
                <span><b>地 区:</b></span>
                <select name="area" id="area">
                    <option value="0">--请选择--</option>
                </select>
            </form>

        </div>

    </div>
</body>
<script>
    $(function () {
        //调用函数
        getCountry();
        // 选项节点获取code --province Code
        $("#province").change(function () {
            CountryId = $("#province").val();
            // console.log(FatherId);
            getCity(CountryId);
            CityID = $("#city").val();
            // console.log(CityID);
            getArea(CityID);

        });
        // 选项节点获取code --City Code
        $("#city").change(function () {
            CityID = $("#city").val();
            // console.log(CityID);
            getArea(CityID);
        })

    })
</script>

</html>

JS代码

// Ajax获取数据,本地json文件
function getData() {
    $.ajax({
        url: './json/third-level-address.json', // 本地json文件位置
        type: 'get', // ajax 获取方式
        async: false, // 是否异步
        success: function (data) { // 成功,返回data
            if (data == "error") {
                alert("系统错误");
                return;
            }
            dataJson = data; 
        }
    });
    return dataJson; //返回json数据
}

// 获取province(省)
function getCountry() {
    var data = getData(); // 获取json数据
    var options = "<option value='0'>--请选择--</option>"; //定义初始选项
    for (var i in data) {  //循环json数据
        options += "<option value='" + data[i].code + "' selected>" + data[i].name + "</option>"; // 给选项(options) 添加属性value以及显示的数据(城市名称)
        $("#province").html(options); // 通过jQuery 将选项添加到下拉框(province)
    }
}
// 获取City(城市)
function getCity(countryCode) {  // 参数 :countryCode 是json 数据中省份的 Code
    var data = getData(); // 获取json数据
    $('#city').empty();  // 先置空city的选项,无所谓
    var options = "<option value='0'>--请选择--</option>"; //定义初始选项
    for (var i in data) {  //循环json数据
        for (let j = 0; j < data[i].children.length; j++) { // 这个循环是判断省份下面城市的数量,不循环,获取不到其他的城市,只能获取一个
            if (countryCode && countryCode == data[i].code) {  // 通过Code 判断来显示城市
                options += "<option value='" + data[i].children[j].code + "' selected>" + data[i].children[j].name + "</option>"; // 这里注意:children[j],一定要是j,如果填写[i],会超过城市的数量(数组越界)会报错!!!
            }

        }
        $("#city").html(options); // 通过jQuery 将选项添加到下拉框(city) 
    }

}
// 获取Area(区域)
function getArea(cityCode) { // 参数 :cityCode 是json 数据中市的 Code
    var data = getData(); // 获取json数据
    var options = "<option value='0'>--请选择--</option>"; // 定义初始选项
    for (var i in data) { //循环json数据
        for (let j = 0; j < data[i].children.length; j++) {  // 这个循环是判断省份下面城市的数量,不循环,获取不到其他的城市,只能获取一个
            for (let k = 0; k < data[i].children[j].children.length; k++) { // 这里的循环是获取城市城市下面区域的数量长度,同上,否则只会获取一个数据
                if (cityCode && cityCode == data[i].children[j].code) {  // 通过Code 判断来显示区域
                    options += "<option value='" + data[i].children[j].children[k].code + "' selected>" + data[i].children[j].children[k].name + "</option>";  // 这里的children[j].children[k]同上,否则数组越界报错
                }
            }
        }
        $("#area").html(options); // 通过jQuery 将选项添加到下拉框(area)
    }

}

CSS 代码

body {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
}

select {
    /* background: #fafdfe; */
    background: transparent;
    height: 28px;
    width: 180px;
    line-height: 28px;
    border: 1px solid #9bc0dd;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 50px;
    border-color: #54b5a6;
    outline-color: #ebadb6;
    /* color: rgb(2, 60, 29); */
    margin-top: 10px;
}

.form {
    width: 180px;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    text-align: center;
}

.card {
    width: 250px;
    height: 254px;
    background: linear-gradient(135deg, #ebadb6 0%, #aceae1 100%);
    border-radius: 7px;
    box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
   }

JSON文件下载

来源：蓝奏云

文件结构

下载

此内容查看价格为5资源币，VIP 8折，请先

客服QQ:3517283258

版权声明 1 本网站名称：QingYu
2 本站永久网址：https://landaiqing.space
3 当前文章标题：基于jQuery的AJAX实现三级联动菜单
4 当前文章网址：https://landaiqing.space/516.html
5 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ进行删除处理。
6 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
7 如您发现本站提供资源链接失效，请联系我们处理。

THE END