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

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

效果图如下

 

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 创建一个二维数组进行遍历得到结果还可以吧

相关文章
QGS
|
8月前
|
XML 前端开发 JavaScript
手搭手Ajax经典基础案例省市联动
手搭手Ajax经典基础案例省市联动
QGS
19 1
|
10月前
|
开发框架 前端开发 JavaScript
列举一些CSS框架?
列举一些CSS框架?
|
11月前
|
前端开发 JavaScript 开发者
JavaScript保姆级教学:从入门到精通一步不落
JavaScript保姆级教学:从入门到精通一步不落
36 1
|
自然语言处理 前端开发
html+css+js+jq简单实现原神官网动态效果
html+css+js+jq简单实现原神官网动态效果
311 0
|
移动开发 JavaScript HTML5
指尖大冒险、跳一跳升级版html5游戏全代码
指尖大冒险、跳一跳升级版html5游戏全代码
138 0
指尖大冒险、跳一跳升级版html5游戏全代码
|
JavaScript 前端开发 Java
jquery实现动态表格项目(表格增加删除/全选/表格变色特效等功能)(附源码+javaWEB开发如果需要可以直接使用)
jquery实现动态表格项目(表格增加删除/全选/表格变色特效) 🍅 Java学习路线:搬砖工的Java学习路线 🍅 作者:程序员小王 🍅 程序员小王的博客:https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF 🍅 扫描主页左侧二维码,加我微信 一起学习、一起进步 🍅 欢迎点赞 👍 收藏 ⭐留言 📝
276 0
jquery实现动态表格项目(表格增加删除/全选/表格变色特效等功能)(附源码+javaWEB开发如果需要可以直接使用)
|
JavaScript 前端开发
某东网页(动态)搭建(jquery)
网页编程实战三: 利用jquery实现京东网页(动态)搭建,
某东网页(动态)搭建(jquery)
|
JavaScript 定位技术 API
地图开发笔记(二):Qt与百度地图js交互的基础-Qt向Js发送指令定位各大省份与城市
地图开发笔记(二):Qt与百度地图js交互的基础-Qt向Js发送指令定位各大省份与城市
地图开发笔记(二):Qt与百度地图js交互的基础-Qt向Js发送指令定位各大省份与城市
|
JavaScript 程序员
硬核解析,巧用案例学习jQuery框架三种事件绑定方式
硬核解析,巧用案例学习jQuery框架三种事件绑定方式
185 0
硬核解析,巧用案例学习jQuery框架三种事件绑定方式
|
JavaScript 前端开发
JavaScript实现的水果忍者游戏,支持鼠标操作
JavaScript实现的水果忍者游戏,支持鼠标操作
122 0
JavaScript实现的水果忍者游戏,支持鼠标操作