JS省市区三级联动菜单

最新推荐文章于 2023-01-17 13:25:54 发布

*贠*

最新推荐文章于 2023-01-17 13:25:54 发布

阅读量376

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/weixin_46309278/article/details/109695316

版权

数据形式

{
  "河北": {
    "石家庄": ["长安区", "桥东区", "桥西区", "新华区", "井陉矿区", "裕华区", "井陉县", "正定县", "栾城县", "行唐县", "灵寿县", "高邑县", "深泽县", "赞皇县", "无极县", "平山县", "元氏县", "赵县", "辛集市", "藁城市", "晋州市", "新乐市", "鹿泉市", "其他"],
    "唐山": ["路南区", "路北区", "古冶区", "开平区", "丰南区", "丰润区", "滦县", "滦南县", "乐亭县", "迁西县", "玉田县", "唐海县", "遵化市", "迁安市", " 曹妃甸区", "其他"],
    "秦皇岛": ["海港区", "山海关区", "北戴河区", "青龙满族自治县", "昌黎县", "抚宁县", "卢龙县", "其他"],
    "邯郸": ["邯山区", "丛台区", "复兴区", "峰峰矿区", "邯郸县", "临漳县", "成安县", "大名县", "涉县", "磁县", "肥乡县", "永年县", "邱县", "鸡泽县", "广平县", "馆陶县", "魏县", "曲周县", "武安市", "其他"],
    "邢台": ["桥东区", "桥西区", "邢台县", "临城县", "内丘县", "柏乡县", "隆尧县", "任县", "南和县", "宁晋县", "巨鹿县", "新河县", "广宗县", "平乡县", "威县", "清河县", "临西县", "南宫市", "沙河市", "其他"],
    "保定": ["新市区", "北市区", "南市区", "满城县", "清苑县", "涞水县", "阜平县", "徐水县", "定兴县", "唐县", "高阳县", "容城县", "涞源县", "望都县", "安新县", "易县", "曲阳县", "蠡县", "顺平县", "博野县", "雄县", "涿州市", "定州市", "安国市", "高碑店市", "其他"],
    "张家口": ["桥东区", "桥西区", "宣化区", "下花园区", "宣化县", "张北县", "康保县", "沽源县", "尚义县", "蔚县", "阳原县", "怀安县", "万全县", "怀来县", "涿鹿县", "赤城县", "崇礼县", "其他"],
    "承德": ["双桥区", "双滦区", "鹰手营子矿区", "承德县", "兴隆县", "平泉县", "滦平县", "隆化县", "丰宁满族自治县", "宽城满族自治县", "围场满族蒙古族自治县", "其他"],
    "沧州": ["新华区", "运河区", "沧县", "青县", "东光县", "海兴县", "盐山县", "肃宁县", "南皮县", "吴桥县", "献县", "孟村回族自治县", "泊头市", "任丘市", "黄骅市", "河间市", "其他"],
    "廊坊": ["安次区", "广阳区", "固安县", "永清县", "香河县", "大城县", "文安县", "大厂回族自治县", "霸州市", "三河市", "其他"],
    "衡水": ["桃城区", "枣强县", "武邑县", "武强县", "饶阳县", "安平县", "故城县", "景县", "阜城县", "冀州市", "深州市", "其他"]
  },
 .............
}

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <select class="province">
        
    </select>
    <select class="city">
    </select>
    <select class="town">
    </select>
    <script type="module">
        import sele from "./js/sele.js";
        let s=new sele();  
        var pp;
        var selects=Array.from(document.querySelectorAll("select"));
        for(var i=0;i<selects.length;i++){
            selects[i].addEventListener("change",changeHandler);
        }
        function changeHandler(e){
            console.log(e.target);
            switch(e.target.className){
                case "province":
                    let p=new sele("province",e.target.options[e.target.selectedIndex].text);
                    pp=e.target.options[e.target.selectedIndex].text;
                    break;
                case "city":
                    //选中的文本内容
                    let text=e.target.options[e.target.selectedIndex].text;
                    let c=new sele("city",pp,text);
                    break;
            }
        }
    </script>
</body>
</html>

JS代码部分

export default class Sele extends EventTarget{
    xhr;
    province;
    static count=1;
    type;
    obj;
    constructor(_type,_province,_city) {
        super();
        this.type=_type;
        this.province=_province;
        this.city=_city;
        this.getType(this.type);
        this.xhr= new XMLHttpRequest();
        this.xhr.addEventListener("load",e=>this.loadHandler(e));
        this.xhr.open("GET","http://10.9.72.203:4011/"+this.type+"/?province="+this.province+"&city="+this.city);
        this.xhr.send()
    }
    getType(type){
        if(Sele.count===1) type="first";
        Sele.count++;
        if(type==="city"){
            type="town"
        }
        this.type=type;
        console.log(this.type)
    }
    create(type,data){
        switch(type){
            case "first":
                var provinceList=data["provinceList"];
                var cityList=data["cityList"];
                var townList=data["townList"];
                this.createList(provinceList,".province");
                this.createList(cityList,".city");
                this.createList(townList,".town");
                break;
            case "province":
                var cityList1=data["cityList"];
                var townList1=data["townList"];
                this.createList(cityList1,".city");
                this.createList(townList1,".town");
                break;
            case "town":
                var townList2=data["townList"];
                this.createList(townList2,".town");
                break;

        }
    }
    createList(list,parent){
        var str1="";
        list = list.forEach(item => {
            str1 += `<option> ${item} </option>`;
        });
        var de1=document.querySelector(parent);
        de1.innerHTML=str1;
    }
    loadHandler(e){
        this.obj=JSON.parse(this.xhr.response);
        this.create(this.type,this.obj);
    }


}

*贠*

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS省市区三级联动菜单

数据形式{ "河北": { "石家庄": ["长安区", "桥东区", "桥西区", "新华区", "井陉矿区", "裕华区", "井陉县", "正定县", "栾城县", "行唐县", "灵寿县", "高邑县", "深泽县", "赞皇县", "无极县", "平山县", "元氏县", "赵县", "辛集市", "藁城市", "晋州市", "新乐市", "鹿泉市", "其他"], "唐山": ["路南区", "路北区", "古冶区", "开平区", "丰南区", "丰润区", "滦县.
复制链接

扫一扫