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. selenium的报错信息:selenium.common.exceptions.InvalidSelectorException: Message: invalid selector: Compound class names not permitted

    报错信息:selenium.common.exceptions.InvalidSelectorException: Message: invalid selector: Compound class ...

  2. ios+openflow 问题

    环境:xcode5.1+ios7.1 需求:A试图 的scroll加入 B视图:[A addSubview:B.view] 问题: 1.B视图载入到A视图上了,但Openflow的图片未载入.后经调试 ...

  3. DICOM医学图像处理:fo-dicom网络传输之 C-Echo and C-Store

    背景: 上一篇博文对DICOM中的网络传输进行了介绍.主要參照DCMTK Wiki中的英文原文.通过对照DCMTK与fo-dicom两个开源库对DICOM标准的详细实现,对理解DICOM标准有一个更直 ...

  4. Oracle 学习笔记 13 -- 控制用户权限

    数据库控制语言的功能室控制用户对数据库的存取权限. 用户对某类数据具有何种操作权限是有DBA决定的.Oracle 通过GRANT语句完毕权限的授予,通过REVOKE语句完毕对权限的收回. 权限分为系统 ...

  5. ES transport client底层是netty实现,netty本质上是异步方式,但是netty自身可以使用sync或者await(future超时机制)来实现类似同步调用!因此,ES transport client可以同步调用也可以异步(不过底层的socket必然是异步实现)

    ES transport client底层是netty实现,netty本质上是异步方式,但是netty自身可以使用sync或者await(future超时机制)来实现类似同步调用! 因此,ES tra ...

  6. JavaScript中Math常用方法

    title: JavaScript中Math常用方法 toc: false date: 2018-10-13 12:19:31 Math.E --2.718281828459045,算数常量e Mat ...

  7. class-metaclass-Class vs. type

    In some languages, classes are only a compile-time feature (new classes cannot be declared at runtim ...

  8. 线程与cpu

    A thread is a basic unit of CPU utilization, consisting of a program counter, a stack, and a set of ...

  9. 脚本_实时显示网卡eth0上的数据流量

    #!bin/bash#功能:使用死循环,实时显示网卡eth0发送的数据包流量#作者:liusingbonwhile : do       echo "本地网卡eth0的数据流量信息如下:&q ...

  10. Python3基础笔记---模块

    参考博客:Py西游攻关之模块 模块的概念: 我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很多编程语言都采用这种组织代码的方式.在Python中,一个.py文件就称之为 ...