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

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

效果图如下

 

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

相关文章
|
11月前
|
编译器 定位技术 API
|
开发框架 前端开发 JavaScript
列举一些CSS框架?
列举一些CSS框架?
|
JavaScript 数据库
2021-07-31大连东软实训第十天---监听器,过滤器,cookie,jQuery基本语法,多选
2021-07-31大连东软实训第十天---监听器,过滤器,cookie,jQuery基本语法,多选
51 0
|
6月前
|
编解码 前端开发 JavaScript
前端css常用的几种布局方式(推)
前端css常用的几种布局方式(推)
111 0
|
移动开发 JavaScript HTML5
指尖大冒险、跳一跳升级版html5游戏全代码
指尖大冒险、跳一跳升级版html5游戏全代码
180 0
指尖大冒险、跳一跳升级版html5游戏全代码
|
自然语言处理 前端开发
html+css+js+jq简单实现原神官网动态效果
html+css+js+jq简单实现原神官网动态效果
428 0
|
前端开发
#yyds干货盘点 react笔记之学习之内联样式和样式表
#yyds干货盘点 react笔记之学习之内联样式和样式表
75 0
|
JavaScript 前端开发
#yyds干货盘点# 【js学习笔记四十八】实现两栏布局的第四种方式
#yyds干货盘点# 【js学习笔记四十八】实现两栏布局的第四种方式
103 0
#yyds干货盘点# 【js学习笔记四十八】实现两栏布局的第四种方式
|
JavaScript 前端开发
#yyds干货盘点# 【js学习笔记四十七】实现两栏布局的第三种方式
#yyds干货盘点# 【js学习笔记四十七】实现两栏布局的第三种方式
92 0
#yyds干货盘点# 【js学习笔记四十七】实现两栏布局的第三种方式
|
JavaScript 前端开发
#yyds干货盘点# 【js学习笔记四十九】实现两栏布局的第五种方式
#yyds干货盘点# 【js学习笔记四十九】实现两栏布局的第五种方式
86 0
#yyds干货盘点# 【js学习笔记四十九】实现两栏布局的第五种方式
下一篇
无影云桌面