用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 ...
随机推荐
- Qt之qInstallMessageHandler(输出详细日志)
简述 安装之前已定义的消息处理程序,返回一个指向前一个消息处理程序. 消息处理程序是一个函数,用于打印调试信息.警告信息.严重错误和致命的错误的消息.Qt库(debug模式)包含成百上千的警告信息打印 ...
- Android仿QQ ios dialog,仿QQ退出向上菜单
Android仿QQ ios dialog,仿QQ退出向上菜单 EasyDialog两种模式 仿QQ退出向上菜单,自己定义向上菜单 github地址:https://gith ...
- MarkDown、Vim双剑合璧
作为一名软件攻城狮(是的,我从来都以攻城狮自居! 我坚信如今的每一天,都在朝攻城狮迈进.虽然被菜鸟的肉身皮囊裹着,我依然还是怀着攻城狮的内心! 我非常讨厌别人喊我程序猿.虽然这是不争的事实!).... ...
- WPF错误:必须使“Property”具有非 null 值。
这个问题一般出如今Triggers中Property指定的类型为Nullable. 解决的方法就是用DataTrigger取代Trigger, 然后用Binding+Converter转换为详细非Nu ...
- True or False? and WHY??? Java HashSet Contains
import java.util.HashSet; public class MyClass { public String s; public MyClass(String s) { this.s ...
- ElasticSearch 深入理解 三:集群部署设计
ElasticSearch 深入理解 三:集群部署设计 ElasticSearch从名字中也可以知道,它的Elastic跟Search是同等重要的,甚至以Elastic为主要导向. Elastic即可 ...
- 乔治·霍兹(George Hotz):特斯拉、谷歌最可怕的对手!
17岁破解iPhone,21岁攻陷索尼PS3:现在,他是埃隆·马斯克最可怕的对手. 黑客往事 许多年后,当乔治·霍兹(George Hotz)回首往事,一定会把2007年作为自己传奇人生的起点 ...
- 用Beamer做Slides
学术用幻灯片,首选还是latex.但是问题来了,Beamer这个latex幻灯模板还需要很多自定义设置.于是找了网上一些自己觉得好的例子. http://www.latexstudio.net/ind ...
- 读取XML字符串到临时表
DECLARE @hdoc int DECLARE @doc xml SET @doc = '<CityValueSet> <CityItem> <CityId>2 ...
- maven/ssm框架搭建
好久没有写java了,昨天学了下maven,不用手动的下载和添加jar包,实在是太方便. ------------------------------------------------------- ...