省市县三级联动

最新推荐文章于 2023-05-05 15:50:06 发布

孤影_ls

最新推荐文章于 2023-05-05 15:50:06 发布

阅读量342

点赞数

分类专栏： # JS Demo 文章标签： javascript css html 前端

本文链接：https://blog.csdn.net/Sheng_zhenzhen/article/details/103943757

版权

JS Demo 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

效果图

点击第一个第二个会把后边的清除

html+css

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>珠峰培训-省市县级联菜单</title>
    <link rel="stylesheet" href="css/reset.min.css">
    <style>
        .menu {
            margin: 20px auto;
            padding: 20px;
            width: 360px;
            border: 1px solid lightblue;
        }

        .menu select {
            display: inline-block;
            margin-right: 10px;
            padding: 0 5px;
            width: 100px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #DDD;
        }
    </style>
</head>
<body>
<div class="menu">
    <select name="region" id="province">
        <option value="">请选择</option>
    </select>
    <select name="region" id="city">
        <option value="">请选择</option>
    </select>
    <select name="region" id="county">
        <option value="">请选择</option>
    </select>
</div>

<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/index2.js"></script>
</body>
</html>

js

let val;
//
$.ajax({
    url: "./json/regionData.json",
    type: "get",
    async: false,
    success: function (data) {
        let arr = formData(0, data);
        $("#province").html(bindHtml(arr));
        $("#province").change(function () {
            val = $(this).val();
            let arr = formData(1, data);
            $("#city").html(bindHtml(arr));
            county.length = 1;
        })
        $("#city").change(function () {
            val = $(this).val();
            let arr = formData(2, data);
            $("#county").html(bindHtml(arr));
        })
    }
})

function formData(level, data) {
    let result = [];
    let ary = null;
    if (level === 0) {

        $.each(data, function (index, item) {
            result.push(item.name);
        })
    }
    if (level === 1) {
        $.each(data, function (index, item) {
            if (val === item.name) {
                ary = item.city;
            }
        })
        $.each(ary, function (index, item) {
            result.push(item.name)
        })
    }
    if (level === 2) {
        $.each(data, function (index, item) {
            $.each(item.city, function (index, item) {
                if (val === item.name) {
                    result = item.area;
                }
            })
        })
    }
    return result;
}

function bindHtml(arr) {
    let str = `<option value="">请选择</option>`;
    $.each(arr, function (index, item) {
        str += `<option value="${item}">${item}</option>`
    })
    return str;
}

孤影_ls

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
省市县三级联动

html+css<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>珠峰培训-省市县级联菜单</title> <link rel="stylesheet" href="css/reset.min.css"> &lt...
复制链接

扫一扫