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加选中事件的更多相关文章

  1. jquery复选框 选中事件 及其判断是否被选中

    jquery复选框 选中事件 及其判断是否被选中 (2014-07-25 14:03:54) 转载▼ 标签: jquery复选框选中事件 分类: extjs jquery   今天做了 显示和不显示密 ...

  2. jQuery 设置select默认选中问题

    在进行其他操作后,恢复select默认选中 html代码: <select id="shai" style="width:150px;margin:5px 50px ...

  3. JQuery 获取select被选中的value和text

    html代码: <select name="test" > <option value="0">请选择</option> & ...

  4. jquery复选框 选中事件 及其判断是否被选中_常用笔记

    checkbox的change事件可监听是否选中状态,也可添加onclick事件. var dom=$('.checkbox'); 1. 判断checkbox是否被选中 var dom=$('.che ...

  5. jQuery文档加载事件

    $(document).ready(handler) $().ready(handler) (this is not recommended) $(handler) 相当于: $(document). ...

  6. jquery 获取select框选中的值示例一则

    $('#MODULE_TYPE').change(function(){ var moduleType=$(this).children('option:selected').val();//这就是s ...

  7. jquery操作select标签change事件

    $('#update_supply_id').on('change',function(){//判断是否选取prompt属性,无返回值: if($(this).val()){ var selectTe ...

  8. jquery操作select的各种方法

    在工作中,有时候会遇到给select组件添加一些事件,前两天发表了一篇文章,<用jquery给select加选中事件>大致阐述了简单的jq操作select的方法,但是为了详细的介绍一下se ...

  9. 从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

随机推荐

  1. 【POJ 2485】 Highways

    [POJ 2485] Highways 最小生成树模板 Prim #include using namespace std; int mp[501][501]; int dis[501]; bool ...

  2. DataTables warning: table id=dataTable - Requested unknown parameter &#39;acceptId&#39; for row 0. For more

    重点内容 DataTables warning: table id=dataTable - Requested unknown parameter 'acceptId' for row 0. For ...

  3. RT-Thread开篇

    一直以来对操作系统都有一种既仰慕又畏惧的情感.一方面被操作系统的强大深深吸引.还有一方面又被操作系统的复杂性感到畏惧. 记得在学校的时候也学过一些操作系统的理论知识,但也只限于理论,更似人云亦云. 本 ...

  4. bzoj1066: [SCOI2007]蜥蜴(最大流)

    1066: [SCOI2007]蜥蜴 题目:传送门 题解: 哇QTT大佬一眼秒算法...ORT 其实很容易就可以看出来是一道最大流 因为有边的使用限制,那么就可以直接当成是流量来处理嘛 因为是对点进行 ...

  5. 你务必知道的css简写

    欢迎加入前端交流群来py:749539640   简写属性是可以让你同时设置其他几个 CSS 属性值的 CSS 属性.使用简写属性,Web 开发人员可以编写更简洁.更具可读性的样式表,节省时间和精力. ...

  6. hihocoder1415 重复旋律3

    思路: 扫一遍height 判一下即可 //By SiriusRen #include <cstdio> #include <cstring> #include <alg ...

  7. H.264标准(一)mp4封装格式详解

    在网络层,互联网提供所有应用程序都要使用的两种类型的服务,尽管目前理解这些服务的细节并不重要,但在所有TCP/IP概述中,都不能忽略他们: 无连接分组交付服务(Connectionless Packe ...

  8. jq操作属性,元素,样式,事件

    操作属性: 单个 $('选择器').attr('属性名','属性值'); 多个 $('选择器').attr({'属性名':'属性值','':''}); eg: $('#a1').attr('flag' ...

  9. First-class citizen

    In programming language design, a first-class citizen (also type, object, entity, or value) in a giv ...

  10. ARC下dealloc过程及.cxx_destruct的探究

    我是前言 这次探索源自于自己一直以来对ARC的一个疑问,在MRC时代,经常写下面的代码: - (void)dealloc { self.array = nil; self.string = nil; ...