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. MySQL优化之——集群搭建步骤具体解释

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/46833179 1 概述 MySQL Cluster 是MySQL 适合于分布式计算 ...

  2. 手写一个节点大小平衡树(SBT)模板,留着用

    看了一下午,感觉有了些了解.应该没有错,有错希望斧正,感谢 #include<stdio.h> #include<string.h> struct s { int key,le ...

  3. linux 命令 xxd

    xxd,能够查看linux下文件的二进制表示.man一下xxd.能够得到下面信息 NAME        xxd - make a hexdump or do the reverse. SYNOPSI ...

  4. hdu 4544 湫湫系列故事——消灭兔子 优先队列+贪心

    将兔子的血量从小到大排序,箭的威力也从小到大排序, 对于每仅仅兔子将威力大于血量的箭增加队列,写个优先队列使得出来数位价钱最少.. #include<stdio.h> #include&l ...

  5. 打印全排列和stl::next_permutation

    打印全排列是个有点挑战的编程问题.STL提供了stl::next_permutation完美的攻克了这个问题. 可是,假设不看stl::next_permutation,尝试自己解决,怎么做? 非常自 ...

  6. pyspark kafka createDirectStream和createStream 区别

    from pyspark.streaming.kafka import KafkaUtils kafkaStream = KafkaUtils.createStream(streamingContex ...

  7. xBIM 实战03 使用WPF技术实现IFC模型的加载与浏览

    系列目录    [已更新最新开发文章,点击查看详细]  WPF应用程序在底层使用 DirectX ,无论设计复杂的3D图形(这是 DirectX 的特长所在)还是绘制简单的按钮与文本,所有绘图工作都是 ...

  8. java 后台实现ajax post跨域请求传递json格式数据获取json数据问题

    参考大神:http://blog.csdn.net/chunqiuwei/article/details/19924821 java后台: public String ajaxProxy(Intege ...

  9. (转载) 据说年薪30万的Android程序员必须知道的

    据说年薪30万的Android程序员必须知道的帖子 标签: android 2015-03-12 16:52 28705人阅读 评论(14) 收藏 举报 Android中国开发精英 目前包括: And ...

  10. JavaScript学习——使用JS完成注册页面表单校验

    1.步骤分析 第一步:确定事件(onsubmit)并为其绑定一个函数 第二步:书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>) 第三步:对用户输入的数据进行判断 ...