用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 ...
随机推荐
- [Angular] Provide Feedback to Progress Events with Angular’s HttpRequest Object
In some cases your application might need to upload large amounts of data, such as files. Obviously ...
- c/c++常见试题
- tableau desktop(三)--构建数据视图(二)
前段时间忙于工作的事情,好久没有来记录一点东西了,今天利用周末做点记录吧,近期因为工作的原因,也有两三周没实用tableau了.今天继续上一篇构建数据试图(二). 3.7 參考线和參考区间 參考线通经 ...
- 每一个JavaScript开发者都应该知道的10道面试题
JavaScript十分特别.而且差点儿在每一个大型应用中起着至关关键的数据.那么,究竟是什么使JavaScript显得与众不同,意义非凡? 这里有一些问题将帮助你了解其真正的奥妙所在: 1.你能 ...
- hdoj--3666--THE MATRIX PROBLEM(差分约束+SPFA深搜)
THE MATRIX PROBLEM Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Other ...
- 搞定ubuntu下环境变量的配置
Ubuntu Linux系统环境变量配置文件: /etc/profile : 在登录时,操作系统定制用户环境时使用的第一个文件 ,此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行. ...
- 18.boost 图的拓扑排序
运行结果: 代码示例: #include <iostream> #include <vector> #include <deque> #include <bo ...
- 头像文件上传 方法一:from表单 方法二:ajax
方法一:from表单 html 设置form表单,内包含头像预览div,内包含上传文件input 设置iframe用来调用函数传参路径 <!--表单提交成功后不跳转处理页面,而是将处理数据返回给 ...
- 你不知道的JavaScript(八)逻辑运算
JS的逻辑运算结果和其他一些强类型语言差别比较大,也比较容易让人产生困惑,看下面的例子: <script type="text/javascript"> var a = ...
- js字符串日期yyyy-MM-dd转化为date示例代码
最近遇到一个问题,就是获取表单中的日期往后台通过json方式传的时候,遇到Date.parse(str)函数在ff下报错: NAN 找了些资料,发现是由于Date.parse()函数对日期格式有要求: ...