用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 ...
随机推荐
- extjs动态导入
Ext.Loader.setConfig({enabled: true}); Ext.Loader.setPath("util", "../wx/jsUtil" ...
- linux下线程
linux下线程 线程与进程的关系: 之前转载的微信文章,进程与线程的差别已经说得比較清楚了.能够查看之前转载的文章.linux进程与线程的差别. 创建一个线程: #include<pthrea ...
- log4j.xml打印日志信息(2)
log4j.xml文件 <? xml version="1.0" encoding="UTF-8"?> <!DOCTYPE log4j:con ...
- poj3071之概率DP
Football Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 2667 Accepted: 1361 Descript ...
- HDU 5375 Gray code(2015年多校联合 动态规划)
题目连接 : 传送门 题意: 给定一个长度为的二进制串和一个长度为n的序列a[],我们能够依据这个二进制串得到它的Gray code. Gray code中假设第i项为1的话那么我们就能够得到a[i] ...
- 那些年尝试过的效率工具之Total Commander
昨天电脑文件很乱,想整理一下发现移动.复制文件要来回目录切换很麻烦,突然就又想起了用Total Commander——简称TC,很久之前尝试过但没坚持使用的工具. 借此机会总结一下自己对TC的认识,后 ...
- ShellExcuteA
ShellExecuteA(,//0表示系统打开 "open",//操作 "1.mp3",//操作路径 0,//第四个,第五个参数都是保留参数,默认都为0 0, ...
- mysql裸文件备份XtraBackup (innobackupex)
结构如下: 热备分为逻辑备份和裸文件备份. 裸文件备份比逻辑备份在速度上更快一些,因为它在底层复制数据文件.世界上唯一一款开源的,能够对INNODB和XtrDB数据库进行热备的开源工具. 他的优点是备 ...
- Elasticsearch之四种查询类型和搜索原理(博主推荐)
Elasticsearch Client发送搜索请求,某个索引库,一般默认是5个分片(shard). 它返回的时候,由各个分片汇总结果回来. 官网API https://www.elastic.co/ ...
- Gradle学习总结
Gradle学习系列 (1). Gradle快速入门 (2). 创建Task的多种方法 (3). 读懂Gradle语法 (4). 增量式构建 (5). 自定义Property (6). 使用java ...