用原生HTML以JSON数据源实现三级联动

最新推荐文章于 2024-08-02 16:04:15 发布

my-sh

最新推荐文章于 2024-08-02 16:04:15 发布

阅读量320

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/m0_69914454/article/details/129236061

版权

该HTML代码实现了一个动态联动的省份、城市、城镇选择器。使用JavaScript处理DOM事件，当用户选择省份时，自动更新城市选项；选择城市时，更新城镇选项。功能基于province、city和town的JSON数据结构。

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

<!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>
</head>
<style>
    div {
        text-align: center;
        display: inline;
        height: 20px;
        width: auto;
        overflow: auto;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
</style>

<body>
    <div>
        <select name="provance" id="province"></select>
        <select name="city" id="city"></select>
        <select name="town" id="town"></select>
    </div>
</body>
<script>
    let EventUtil = {
        addHandler: function (element, type, handler) {
            if (element.addEventListener) {
                element.addEventListener(type, handler, false)
            } else if (element.attachEvent) {
                element.attachEvent('on' + type, handler);
            } else {
                element['on' + type] = handler
            }
        },
        removeHandler: function (element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler, false);
            } else if (element.detachEvent) {
                element.detachEvent("on" + type, handler);
            } else {
                element["on" + type] = null;
            }
        },
        getEvent: function (event) {
            return event ? event : window.event;
        },
        getTarget: function (event) {
            return event.target || event.srcElement;
        },

        // 阻止冒泡
        preventDefault: function (event) {
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        },
        // 阻止默认行为
        stopPropagation: function (event) {
            if (event.stopPropagation) {
                event.stopPropagation();
            } else {
                event.cancelBubble = true;
            }
        }

    }
    let optionKinds = {
        "province": {
            "河北省": ['石家庄', '唐山', '邯郸', '保定', '沧州', '邢台市', '廊坊市', '承德市', '张家口', '衡水', '秦皇岛'],
            "河南省": ['郑州', '开封', '洛阳', '南阳', '漯河', '许昌', '三门峡', '周口', '驻马店', '焦作', '濮阳', '安阳', '商丘', '信仰', '济源'],
            "广东省": ['广州', '珠海市', '汕头', '韶关', '佛山', '江门', '江门', '河源', '江阳'],
        },
        "city": {
            "石家庄": ['桥西区', '新华区', '长安区', '裕华区', '石家庄矿区', '路园区'],
            "唐山": ['曹妃甸区', '古治区', '丰南区', '开平区', '丰润区', '路北区', '迁安市', '敦化市'],
            "郑州": ['惠济区', '二七区', '管城回族区', '中原区', '金水区', '郑东新区'],
            "焦作": ['解放区', '山阳区', '中站区', '马村区', '修武县', '武陟县', '温县', '博爱县', '沁阳市', '孟州市'],
            "开封": ["龙亭区", '顺和回族区', '鼓楼区', '禹王台区', '祥符区']
        },
    };

    function turn_arr(oJsonArr) {
        let iCount = 0;
        let turn_json_arr = [];
        for (key in oJsonArr) {
            turn_json_arr.push(key);
        }
        return turn_json_arr;
    }

    function init(which_select, keyWord, which_select_son) {
        let placeOption = '';
        let option_arr = turn_arr(optionKinds[keyWord]);
        for (let i = 0; i < option_arr.length; i++) {
            placeOption += "<option value='" + option_arr[i] + "'>" + option_arr[i] + "</option>";
        }
        which_select.innerHTML = placeOption;
        relevance_place(which_select, keyWord, which_select_son); //初始化与之相关联的子列表
    }

    function relevance_place(which_select, keyWord, which_select_son) {
        let placeOption_son = '';
        for (let i = 0; i < which_select.length; i++) {
            if (which_select[i].selected) {
                for (key in optionKinds[keyWord]) {
                    if (key == which_select[i].value) {
                        for (let i = 0; i < optionKinds[keyWord][key].length; i++) {
                            placeOption_son += "<option value='" + optionKinds[keyWord][key][i] + "'>" + optionKinds[
                                keyWord][key][i] + "</option>"
                        }
                        which_select_son.innerHTML = placeOption_son
                    }
                }
            }
        }
    }
    init(document.getElementById('province'), "province", document.getElementById('city'));
    init(document.getElementById('city'), "city", document.getElementById('town'));
    EventUtil.addHandler(document.getElementById('province'), 'change', function () {
        relevance_place(document.getElementById('province'), "province", document.getElementById('city'));
        relevance_place(document.getElementById('city'), 'city', document.getElementById('town'));
    });
    EventUtil.addHandler(document.getElementById('city'), 'change', function () {
        relevance_place(document.getElementById('city'), 'city', document.getElementById('town'));
    })
</script>

</html>