分享一个自己的城市三级联动代码

最新推荐文章于 2023-10-06 19:06:49 发布

Bender_hu

最新推荐文章于 2023-10-06 19:06:49 发布

阅读量171

点赞数 1

本文链接：https://blog.csdn.net/hutao2333/article/details/108702319

版权

这是自己写的城市三级联动代码，给大家分享下~

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <select id="one">
        <option value="">---</option>
    </select>
    <select id="two">
        <option value="" id="yy">---</option>
    </select>
    <select id="thr">
    </select>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.js"></script>
    <script>
        let city = null;
        let cs = null
        var xhr = new XMLHttpRequest()
        xhr.onreadystatechange = () => {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var main = JSON.parse(xhr.responseText)
                city = main
                console.log(main)
                $.each(main, (index, ele) => {
                    $("#one").append(`<option value="${ele.code}">${ele.name}</option>`)
                })
            } else {
                // console.log("err")
            }
        }
        xhr.open("GEt", "./area-json.json", true)
        xhr.send()

        $("#one").on("change", () => {
            $("#yy").siblings().remove()
            $("#thr option").remove()
            console.log($("#one").val())
            $.each(city, (index, ele) => {
                if (!ele.children) {
                    return
                } else {
                    if (ele.code == $("#one").val()) {
                        console.log(ele.children)
                        $.each(ele.children, (index, ele) => {
                            $("#two").append(`<option value="${ele.code}">${ele.name}</option>`)
                        })
                        cs = ele.children
                    }
                }
            })
        })

        $("#two").on("change", () => {
            $("#thr option").remove()
            $.each(cs, (index, ele) => {
                if (ele.code == $("#two").val()) {
                    if (ele.children) {
                        for (let i = 0; i < ele.children.length; i++) {
                            $("#thr").append(`<option value="${ele.children[i].code}">${ele.children[i].name}</option>`)
                        }
                    } else {
                        return
                    }

                }
            })
        })
    </script>
</body>

</html>

Bender_hu

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享一个自己的城市三级联动代码

这是自己写的城市三级联动代码，给大家分享下~<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><b
复制链接

扫一扫