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. 海尔公布首套智能套装SmartCare,主打智能、简单

        2014CIE智能硬件首发会于11月6-8日在上海国际展览中心举行.吸引了海尔.英特尔.百度等知名企业的积极參与. 作为国内智能家居领域的先驱者,海尔在本次大会上首发了轻量智能套装SmartC ...

  2. C#一个托付的样例

    C#中的函数能够被声明的一个托付所调用. 函数为静态方法.和托付声明的參数返回值要一致.   class Program { delegate float MathOperationDelegate( ...

  3. cmd 下命令

    tasklist 查看当前进程 taskkill /? 查看taskkill 的帮助信息 详情 cmd /?  查看cmd详情 color /? 查看颜色详情  比如 color 2 md d:\ji ...

  4. Oracle分析函数ntile

    有这么一个需求.将课程的成绩分成四个等级,为学生打A.B.C.D的绩效. drop table course purge; create table course (   id number,   g ...

  5. iOS开发-Tools-CocoaPods

    CocoaPods是什么? 当你开发iOS应用时,会经常使用到很多第三方开源类库,比如JSONKit,AFNetWorking等等.可能某个类库又用到其他类库,所以要使用它,必须得另外下载其他类库,而 ...

  6. POJ 1945 暴搜+打表 (Or 暴搜+判重)

    思路: 呃呃 暴搜+打表 暴搜的程序::稳稳的TLE+MLE (但是我们可以用来打表) 然后我们就可以打表过了 hiahiahia 可以证明最小的那个数不会超过200(怎么证明的我也不知道),然后就直 ...

  7. POJ 2190 模拟

    按照题意模拟就好- 注意"X"只能出现在最后一位... // by SiriusRen #include <cstdio> using namespace std; c ...

  8. CentOS_mysql8.0_错误

    #参考资料 CSND:https://blog.csdn.net/y_server/article/details/78781177 博客园:http://www.cnblogs.com/testwa ...

  9. 新疆大学OJ(ACM) 1099: 数列有序!

    1099: 数列有序! 时间限制: 1 Sec  内存限制: 128 MB 题目描述 有n(n<=100)个整数,已经按照从小到大顺序排列好,现在另外给一个整数x,请将该数插入到序列中,并使新的 ...

  10. miniUI打开一个新的画面(ondestroy)

    转自:http://blog.csdn.net/u012934325/article/details/77914691 需求:开发中需求通过点击父界面一个按钮弹出一个子界面,在miniUI中我们可以这 ...