地级联菜单

最新推荐文章于 2024-11-10 13:17:33 发布

weixin_52670561

最新推荐文章于 2024-11-10 13:17:33 发布

阅读量633

点赞数 1

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/weixin_52670561/article/details/122055395

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

级联菜单

前言
一、效果
二、使用步骤
- 1.引入库

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、效果

在这里插入图片描述

二、使用步骤

1.引入库

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>级联菜单</title>
</head>
<body>
<form action="#">
    <select name="#" id="express">
        <option value="请选择省/城市">请选择省/城市</option>
    </select>
    <select name="#" id="city">
        <option value="请选择城市/地区">请选择城市/地区</option>
    </select>
</form>
</body>
<script src="js/jquery-1.8.3.js"></script>
<script>
    function f() {
        let cityList = new Array();
        cityList['北京市'] = ['朝阳区','东城区','西城区', '海淀区','宣武区','丰台区','怀柔','延庆','房山'];
        cityList['上海市'] = ['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'];
        cityList['广州省'] = ['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市'];
        cityList['深圳市'] = ['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'];
        cityList['重庆市'] = ['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'];
        cityList['天津市'] = ['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'];
        cityList['江苏省'] = ['南京市','苏州市','无锡市'];
        cityList['浙江省'] = ['杭州市','宁波市','温州市'];
        cityList['四川省'] = ['四川省','成都市'];
        cityList['海南省'] = ['海口市'];
        cityList['福建省'] = ['福州市','厦门市','泉州市','漳州市'];
        cityList['山东省'] = ['济南市','青岛市','烟台市'];
        cityList['江西省'] = ['江西省','南昌市'];
        cityList['广西省'] = ['柳州市','南宁市'];
        cityList['安徽省'] = ['安徽省','合肥市'];
        cityList['河北省'] = ['邯郸市','石家庄市'];
        cityList['河南省'] = ['郑州市','洛阳市','三门峡市','灵宝市','鹤壁市','安阳市','驻马店市','周口市','平顶山市','许昌市','开封市','新乡市'];
        cityList['湖北省'] = ['武汉市','宜昌市'];
        cityList['湖南省'] = ['湖南省','长沙市'];
        cityList['陕西省'] = ['陕西省','西安市'];
        cityList['山西省'] = ['山西省','太原市'];
        cityList['黑龙江省'] = ['黑龙江省','哈尔滨市'];
        cityList['其他'] = ['其他'];
        $("#express").append(function () {
            let html = ""//
            for (let i in cityList) {
                html += "<option value="+i+">"+i+"</option>"
            }
            return $(html)
        })
        $("#express").change(function () {
            let html = ""
            let num = $(this).val()
            let city = cityList[num]
            if (num == "请选择省/城市"){
                html = "<option value='请选择城市/地区'>请选择城市/地区</option>"
                $("#city").html(html)
                return
            }
            for (let i = 0; i < city.length; i++) {
                html += "<option value="+city[i]+">"+city[i]+"</option>"
            }
            $("#city").html(html)
        })
    }
    f()
</script>
</html>