用jquery给select加选中事件
select在前端开发过程中很常用,现在我们要实现一个效果,那就是选中select中的某一项,执行事件,本来自己没怎么接触过这些,最后网上找了一些资料,自己研究了一下,把方法分享给大家,大家如果有需要的可以直接拿过去用,当然这个方法在脑残的IE里也是支持的。
我就演示一个简单的效果吧
我要实现select选中里面的第几条,下面相应的li变颜色,下面是html代码:
<select name="" id="sel">
<option value="1">第一条</option>
<option value="2">第二条</option>
<option value="3">第三条</option>
</select> <ul>
<li class="cur">第一条</li>
<li>第二条</li>
<li>第三条</li>
</ul>
我这里就用jquery实现了,下面是代码:
$('#sel').change(function () {
$('.aaa').find('li').eq($(this).val()-1).addClass('cur').siblings().removeClass('cur')
})
主要用到了一个change事件,然后改变给相应的li添加class。
PS 如果想要改变select默认的选择项,可以写成这样 $('#sel').val('2'),默认就会选中第二条。
用jquery给select加选中事件的更多相关文章
- jquery复选框 选中事件 及其判断是否被选中
jquery复选框 选中事件 及其判断是否被选中 (2014-07-25 14:03:54) 转载▼ 标签: jquery复选框选中事件 分类: extjs jquery 今天做了 显示和不显示密 ...
- jQuery 设置select默认选中问题
在进行其他操作后,恢复select默认选中 html代码: <select id="shai" style="width:150px;margin:5px 50px ...
- JQuery 获取select被选中的value和text
html代码: <select name="test" > <option value="0">请选择</option> & ...
- jquery复选框 选中事件 及其判断是否被选中_常用笔记
checkbox的change事件可监听是否选中状态,也可添加onclick事件. var dom=$('.checkbox'); 1. 判断checkbox是否被选中 var dom=$('.che ...
- jQuery文档加载事件
$(document).ready(handler) $().ready(handler) (this is not recommended) $(handler) 相当于: $(document). ...
- jquery 获取select框选中的值示例一则
$('#MODULE_TYPE').change(function(){ var moduleType=$(this).children('option:selected').val();//这就是s ...
- jquery操作select标签change事件
$('#update_supply_id').on('change',function(){//判断是否选取prompt属性,无返回值: if($(this).val()){ var selectTe ...
- jquery操作select的各种方法
在工作中,有时候会遇到给select组件添加一些事件,前两天发表了一篇文章,<用jquery给select加选中事件>大致阐述了简单的jq操作select的方法,但是为了详细的介绍一下se ...
- 从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
随机推荐
- HDU 1521
指数型生成函数.做这题时,回去看看组合数学才知道,指数生成函数求的就是多重集合的r排列数. #include <iostream> #include <cstdio> #inc ...
- Go语言核心之美 1.1-命名篇
命名篇 1.Go的函数.变量.常量.自己定义类型.包(Package)的命名方式遵循以下规则: 1)首字符能够是随意的Unicode字符或者下划线 2)剩余字符能够是Unicode字符.下划线.数字 ...
- C++继承中析构函数 构造函数的调用顺序以及虚析构函数
首先说说构造函数.大家都知道构造函数里就能够调用成员变量,而继承中子类是把基类的成员变成自己的成员,那么也就是说子类在构造函数里就能够调用基类的成员了,这就说明创建子类的时候必须先调用基类的构造函数, ...
- Android 输入管理服务-输入事件向详细应用的分发
输入管理服务接收到输入事件,对输入事件进行处理之后会把输入事件分发到详细的应用中(如WMS.壁纸服务等)去处理的,这里涉及到了JNI从C++层向JAVA层的调用. 详细流程例如以下图所看到的:
- Android studio 分32位64位版本吗?
下载的时候,是不分32位和64位的.安装完成之后,在bin目录下,有studio.exe和studio64.exe这两个文件.前一个是32位的,后一个是64位的.根据自己的电脑进行选择.
- js mudules.js
var InsertRow={ isMoveRow:false, // 是否存在动态移动行 curSelRowIndex:"", // 当前选中行序号 prevSelRowInde ...
- JAVA设计模式之【命令模式】
命令模式 为了降低耦合度,将请求的发送者和接收者解耦 发送请求的对象只需要哦知道如何发送请求,而不必知道如何完成请求 对请求排队 记录请求日志 支持撤销操作 核心在于引入命令类 角色 抽象命令类Com ...
- hdoj--1384--Intervals(差分约束)
Intervals Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...
- 14.MongoDBUtils工具类
1. public class DbUtils { public static MongoCollection<Document> getMongoCollection(String lo ...
- 时域,频域,s域和z域,一些网上的总结
https://www.jianshu.com/p/29f4a7663b14 https://wenku.baidu.com/view/26961183b9d528ea81c779e0.html ht ...