jq实现简单的二级联动下拉框
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里面放筛选条件
jq实现简单的二级联动下拉框的更多相关文章
- jQuery实现的3个基础案例(仿QQ列表分组,二级联动下拉框,模拟员工信息管理系统)
1.仿QQ列表分组 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&quo ...
- JQ与AJAX 省市区三级联动下拉框
用于初学者学习基本的联动下拉框,废话不多说,见代码 首先看控制器里的3个下拉框对应代码: public ActionResult GetProvinceList() { ProvinceReposit ...
- (实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单
二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类: 前端技术 ...
- jquery+html三级联动下拉框
jquery+html三级联动下拉框及详情页面加载时的select初始化问题 html写的三个下拉框,如下: <select name="ddlQYWZYJ" id=&q ...
- SharePoint 2013 使用查阅项实现联动下拉框
SharePoint列表使用中,经常会用到下拉框,而有些特殊的需求,会用到联动的下拉框,在SharePoint中默认没有这样的字段,所以如果实现,我们需要自己想办法. 这里,我们介绍如何使用JQuer ...
- Android实现三级联动下拉框 下拉列表spinner
Android实现(省.市.县)三级联动下拉框 下拉列表spinner 转载请注明出处: http://www.goteny.com/articles/2013/11/46.html http://w ...
- ajax 多级联动 下拉框 Demo
写了ajax实现级联下拉框,考虑常用,并且级联个数随不同业务个数不同,于是就整理了一下,实现了 ajax + N级联动 下拉框的效果 效果图 HTML 代码 <h2> 省级联动</h ...
- Vue.js组件之联动下拉框
Html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- javascript实例学习之一——联动下拉框
经常碰到这样的需求,如省市_城市_乡镇下拉框.后一个下拉框的内容会根据前一个的改变而改变,之前的解决方法往往是在前一个改变的时候,向后台发送请求临时获取对应的内容.这样每触发一次就会网络请求一次,这种 ...
随机推荐
- Java 2019 生态圈使用报告,这结果你赞同吗?
这是国外一机构调查了 7000 名开发者得出来的 Java 2019 年生态圈工具使用报告,主要调查了 Java 版本.开发框架.web 服务器等使用情况.虽然只有 7000 名开发者参与调查,这数目 ...
- 05-03 主成分分析(PCA)
目录 主成分分析(PCA) 一.维数灾难和降维 二.主成分分析学习目标 三.主成分分析详解 3.1 主成分分析两个条件 3.2 基于最近重构性推导PCA 3.2.1 主成分分析目标函数 3.2.2 主 ...
- C#中的等值判断1
目录 简介 值类型和引用类型的相等比较 和相等比较相关的函数 string 和 System.Uri 的等值比较 泛型接口 IEquatable<T> 自定义比较方法 举例 总结 简介 最 ...
- 面试官,不要再问我“Java GC垃圾回收机制”了
Java GC垃圾回收几乎是面试必问的JVM问题之一,本篇文章带领大家了解Java GC的底层原理,图文并茂,突破学习及面试瓶颈. 楔子-JVM内存结构补充 在上篇<JVM之内存结构详解> ...
- Java学习之面试题整理
1,java 基本数据类型有几种?哪几种?(面试题) 8种 byte short int long float double char boolean 2,int类型是几个字节?(面试题) 4字节 3 ...
- cmake::编译一个工程
1.编译工程,构建过程产生的临时文件等文件与源码隔离,避免源码被污染. # CMake 最低版本号要求 cmake_minimum_required (VERSION 2.8) # 项目信息 proj ...
- linux下执行脚本失败的解决办法
现象: 1的解决办法:赋予该文件可执行权限即可,chmod +x docker.sh 2的解决办法:https://blog.csdn.net/youzhouliu/article/details/7 ...
- 后缀数组(SA)
学习了LRJ神犇的代码.orz. 首先真心建议了解下基数排序!!且要有一定的c++程序经验,否则程序很难看懂. 然后对着下面的程序调试(假装你已经会了算法思想) 弄个一个礼拜一下午就能学会了. 该算法 ...
- 百万年薪python之路 -- 并发编程之 多线程 三
1. 阻塞,非阻塞,同步,异步 进程运行的三个状态: 运行,就绪,阻塞. 从执行的角度: 阻塞: 进程运行时,遇到IO了,进程挂起,CPU被切走. 非阻塞: 进程没有遇到IO 当进程遇到IO, ...
- Intellij idea 一个窗口打开多模块并添加依赖
打开多模块 ctrl+alt+shift+s 或者file->project sturcture 选择modules 添加 选择要添加的模块 选择从现有模块添加,不要选择从现在代码创建模块 添加 ...