实现三级城市联动效果-CSDN博客

这篇博客介绍了如何实现三级城市联动的交互效果，通过HTML和jQuery结合后台数据进行下拉菜单渲染。内容包括设置option高度以优化视觉体验，以及展示选择省市区前后的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常见的三级城市联动

我这里是请求的后台地址，可根据自己请求的后台数据进行下拉菜单渲染，这里请求过来的数据是省市区级的数据是同级别的，所以需要做省市区的层级区分然后再渲染下拉菜单，下面是案例：

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/orderPage.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>

<body>
    <div class="content">
            <form role="form">
                <div class="form-group countryList">
                    <label><span class="star">*</span>都道府県</label>
                    <select name="" id="" class="form-control province"
                        onmousedown="if(this.options.length>6){this.size=7}" onblur="this.size=0"
                        onchange="this.size=0">
                        <option value="">请选择都道</option>
                    </select>
                    <select name="" id="" class="form-control city" onmousedown="if(this.options.length>6){this.size=7}"
                        onblur="this.size=0" onchange="this.size=0">
                        <option value="">请选择府</option>
                    </select>
                    <select name="" id="" class="form-control area" onmousedown="if(this.options.length>6){this.size=7}"
                        onblur="this.size=0" onchange="this.size=0">
                        <option value="">请选择县</option>
                    </select>
                </div>
    </div>
</body>
<script src="./js/jquery-3.5.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>

其中

<select name="" id="" class="form-control province" onmousedown="if(this.options.length>6){this.size=7}" onblur="this.size=0" onchange="this.size=0">
      <option value="">请选择都道</option>
</select>

这部分是用来设置option的高度的，如果下拉选项过多，展示效果很不好看，就可以这么来设置高度，提高页面美观度。

JS:

// 城市联动接口
    var firstLevel = [];  //一级（省）
    var secondLevel = []; //二级（市）
    var thirdLevel = [];  //三级（区）
    $(function () {
        $.ajax({
            url: url,  //请求地址
            type: 'GET',
            contentType: "application/json",
            success: function (data) {
                var data = data.data
                for (i = 0; i < data.length; i++) {  //分别把省市区装成数组
                    if (data[i].level === 0) {
                        firstLevel.push(data[i])
                    } else if (data[i].level === 1) {
                        secondLevel.push(data[i])
                    } else if (data[i].level === 2) {
                        thirdLevel.push(data[i])
                    }
                }
                //组成新的省市区层级json
                thirdLevel.forEach((item) => {
                    let _index = secondLevel.findIndex((seconditem) => {
                        return seconditem.code === item.pCode
                    })
                    if (_index > -1) {
                        if (!secondLevel[_index].children) {
                            secondLevel[_index].children = []
                        }
                        secondLevel[_index].children.push(item)
                    }
                })
                secondLevel.forEach((item) => {
                    let _index = firstLevel.findIndex((seconditem) => {
                        return seconditem.code === item.pCode
                    })
                    if (_index > -1) {
                        if (!firstLevel[_index].children) {
                            firstLevel[_index].children = []
                        }
                        firstLevel[_index].children.push(item)
                    }
                })
                // console.log(firstLevel)

				//分别渲染省市区下拉菜单select
                for (var j = 0; j < firstLevel.length; j++) {
                    /* 一级   */
                    if (firstLevel != null) {
                        var html = "";
                        var htmlL = "";
                        var htmlM = "";
                        for (var i = 0; i < firstLevel.length; i++) {
                            htmlL = "<option value=''>请选择都道</option>"
                            html += "<option value='" + firstLevel[i].name + "'>" + firstLevel[i].name + "</option>";
                            htmlM = htmlL + html;
                        }
                        $(".province").html(htmlM);
                    }
                    // 二级
                    $(".province").change(function () {
                        var htmls = "";
                        var htmlL = "";
                        var htmlM = "";
                        if (firstLevel != null) {
                            for (var i = 0; i < firstLevel.length; i++) {
                                if ($(this).val() == firstLevel[i].name) {
                                    var a = firstLevel[i].children;
                                    // console.log(a);
                                    for (var j = 0; j < a.length; j++) {
                                        htmlL = "<option value=''>请选择府</option>"
                                        htmls += "<option value='" + a[j].name + "'>" + a[j].name + "</option>";
                                        htmlM = htmlL + htmls;
                                    }
                                    $(".city").html(htmlM);
                                }
                            }
                        }
                    })
                    // 三级
                    $(".city").change(function () {
                        var htmls = "";
                        var htmlL = "";
                        var htmlM = "";
                        if (firstLevel != null) {
                            for (var i = 0; i < firstLevel.length; i++) {
                                var ss = firstLevel[i].children;
                                for (j = 0; j < ss.length; j++) {
                                    if ($(this).val() == ss[j].name) {
                                        var a = ss[j].children
                                        for (m = 0; m < a.length; m++) {
                                            htmlL = "<option value=''>请选择县</option>"
                                            htmls += "<option value='" + a[m].name + "'>" + a[m].name + "</option>";
                                            htmlM = htmlL + htmls;
                                        }

                                    }
                                }
                                $(".area").html(htmlM);
                            }
                        }
                    })
                }

            },
            error: function () {
                console.log('数据发送失败');
            }
        });
    })