jq实现简单的二级联动下拉框
2024-10-19 16:43:24
1 效果图
2 html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>二级联动下拉框</title>
<script src="../js/lib/jquery-3.2.1.min.js"></script>
</head>
<body>
<div>
<label>商品分类:</label>
<select id="select-1" style="width:100px;">
<option>--请选择--</option>
</select>
</div>
<div style="margin-top:10px;">
<label>具体商品:</label>
<select style="width:100px;" id="select-2">
<option>--请选择--</option>
</select>
</div>
<script src="../js/option.js"></script>
</body>
</html>
3 jq
$(function(){
var arr1 = ['食材','家居','电子产品'];
var arr2 = [['蔬菜','水果','调料'],['沙发','电池炉','冰箱'],['电脑','手机','充电宝']];
for(let i=0;i<arr1.length;i++){
$('#select-1').append('<option>'+arr1[i]+'</option>');
}
$('#select-1').change(function(){
$('#select-2').children().not(':eq(0)').remove();
var index = $(this).children('option:selected').index();
var arr = arr2[index-1];
for(let i=0;i<arr.length;i++){
$('#select-2').append('<option>'+arr[i]+'</option>');
}
})
})
4 总结
,children();//获取当前选中元素的一级子元素
.change();//绑定元素改变的处理函数
.not();//从选中集合中剔除选中的元素,not里面放筛选条件
最新文章
- 【社工】NodeJS 应用仓库钓鱼
- Android循环滑动寻找元素,直接代码
- 应用HTK搭建语音拨号系统3:创建绑定状态的三音素HMM模型
- Eclipse中进行Gradle+Jetty部署的web项目的断点调试
- Mysql命令alter add:增加表的字段
- MySQL强化
- 实际工作中遇到的一些css
- hdu - 4651 - Partition
- Python----文件的IO操作
- 在MFC对话框中添加状态栏
- 【Android Developers Training】 53. 打印HTML文档
- php array_walk
- eclipse配置虚拟路径后,每次启动tomcat都会虚拟路径失效的问题解决
- php复习整理1--位运算符
- 如何登录mysql? cmd怎么连接mysql数据库||从MYSQL客户端登录MYSQL
- 【BZOJ2734】【HNOI2012】集合选数(状态压缩,动态规划)
- import cv2出现“ImportError: DLL load failed: 找不到指定的模块”
- pywin32模块安装
- BP neural network optimized by PSO algorithm on Ammunition storage reliability prediction 阅读笔记
- .net core 存储base64的图片或文件