用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 ...
随机推荐
- 数据共享之相互排斥量mutex
相互排斥量介绍 相互排斥量能够保护某些代码仅仅能有一个线程运行这些代码.假设有个线程使用相互排斥量运行某些代码,其它线程訪问是会被堵塞.直到这个线程运行完这些代码,其它线程才干够运行. 一个线程在訪问 ...
- HDOJ 2189 悼念512汶川大地震遇难同胞——来生一起走 【母函数】
题意:非常清楚不解释. 策略:如题. 就是个简单的母函数的改变. 这道题做了好久,才明确是那有毛病,还是理解的不够深刻. AC代码: #include<stdio.h> #include& ...
- linux下使用DBCA(database configuration assistant)创建oracle数据库
前提:切换到图形界面 到Oracle的bin文件夹下,使用oracle用户.运行dbca就可以.和windows的效果一样. 假设出现乱码 export LANG="en_US:UTF-8& ...
- 自己定义CNN网络模型并使用caffe训练
caffe自带的例子中对mnist手写体数字训练使用的卷积神经网络是在lenet_train_test.prototxt中定义的,隐含层包含了2个卷积层,2个池化层,2个全连接层,1个激活函数层.网络 ...
- Eclipse里Tomcat报错:Document base ……does not exist or is not a readable directory(图文详解)
问题描述: 严重: Error starting static Resourcesjava.lang.IllegalArgumentException: Document base D:\Code\M ...
- Maven远程仓库:pom依赖以及jar包下载
Maven远程仓库:pom依赖xml配置以及jar包下载: 地址1: http://mvnrepository.com/ 地址2: http://172.16.163.52:8081/nexus/#w ...
- 服务器搭建域控与SQL Server的AlwaysOn环境过程(三)配置故障转移
0 引言 主要讲述如何搭建故障转移集群,因为AlwaysOn是基于Windows的故障转移集群的. 在讲解步骤之前需要了解一下故障转移集群仲裁配置 下面图片来自<Windows Server20 ...
- NodeJS学习笔记 (2)文件系统操作-fs(ok)
原文:https://github.com/chyingp/nodejs-learning-guide/blob/master/%E6%A8%A1%E5%9D%97/fs.md#%E9%80%9A%E ...
- FFT&NTT学习笔记
具体原理就不讲了qwq,毕竟证明我也不太懂 FFT(快速傅立叶变换)&NTT(快速数论变换) FFT //求多项式乘积 //要求多项式A和多项式B的积多项式C //具体操作就是 //DFT(A ...
- PHP SOAP 教程
一.SoapServer 服务器 1.__construct 作用:创建 SoapServer 对象 用法:__construct ( mixed wsdl [, array options] ) 参 ...