二级联动复杂版(升级版)

简介: 二级联动复杂版(升级版)

效果图如下

 

html代码如下

1. <select id="bigCity">
2.          <option>----请选择省份----</option>
3. 
4.        </select>
5.        <select class="city">
6.            <option>----请选择城市----</option>
7.        </select>

jquery代码如下

1.  var arr=[['北京','上海','成都'],['海淀','丰台','顺义','昌平'],['上海1','上海2','上海3','上海4'],['成都1','成都2','成都3','成都4']]
2. 
3.    for (var i=0 ; i<arr[0].length;i++) {
4.      $("#bigCity").append(`<option>${arr[0][i]}</option>`)
5. 
6. 
7.    }
8. 
9.    $("#bigCity").change(function(){
10.       var index=$(this)[0].selectedIndex
11.       $(".city").empty()
12.       for (var i=0 ; i<arr.length ; i++) {
13. 
14.       $('.city').append(`<option>${arr[index][i]}</option>`)
15. 
16.       }
17. 
18. 
19. 
20.     })

emmmmmmmmmmmmmmmmm 创建一个二维数组进行遍历得到结果还可以吧

相关文章
|
10天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1216 5
|
9天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源!同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
1181 87
|
10天前
|
云栖大会
阿里云云栖大会2025年9月24日开启,免费申请大会门票,速度领取~
2025云栖大会将于9月24-26日举行,官网免费预约畅享票,审核后短信通知,持证件入场
1775 12
|
19天前
|
人工智能 运维 安全
|
2天前
|
资源调度
除了nrm-pm,还有哪些工具可以管理多个包管理器的源?
除了nrm-pm,还有哪些工具可以管理多个包管理器的源?
230 127
|
10天前
|
弹性计算 Kubernetes jenkins
如何在 ECS/EKS 集群中有效使用 Jenkins
本文探讨了如何将 Jenkins 与 AWS ECS 和 EKS 集群集成,以构建高效、灵活且具备自动扩缩容能力的 CI/CD 流水线,提升软件交付效率并优化资源成本。
362 0