A-A+

利用jquery给select加选中事件示例

2016年01月07日 前端设计 评论 1 条 阅读 7 views 次

给select增加样式我们只需要addClass与removeClass 给指定css增加样式就可以了,具体来看例子。

select在前端开发过程中很常用,现在我们要实现一个效果,那就是选中select中的某一项,执行事件,本来自己没怎么接触过这些,最后网上找了一些资料,自己研究了一下,把方法分享给大家,大家如果有需要的可以直接拿过去用,当然这个方法在脑残的IE里也是支持的。

我就演示一个简单的效果吧

利用jquery给select加选中事件示例,我要实现select选中里面的第几条,下面相应的li变颜色,下面是html代码:

  1. <select name="" id="sel">  
  2.     <option value="1">第一条</option>  
  3.     <option value="2">第二条</option>  
  4.     <option value="3">第三条</option>  
  5. </select>  
  6. <ul>  
  7.     <li class="cur">第一条</li>  
  8.     <li>第二条</li>  
  9.     <li>第三条</li>  
  10. </ul>  

我这里就用jquery实现了,下面是代码:

  1. $('#sel').change(function () {  
  2.     $('.aaa').find('li').eq($(this).val()-1).addClass('cur').siblings().removeClass('cur')  
  3. })  

主要用到了一个change事件,然后改变给相应的li添加class。

PS 如果想要改变select默认的选择项,可以写成这样 $(‘#sel’).val(’2′),默认就会选中第二条。

标签:

1 条留言  访客:1 条  博主:0 条

  1. 打码赚钱平台

    主要用到了一个change事件,然后改变给相应的li添加class。
    PS 如果想要改变select默认的选择项,可以写成这样 $(‘#sel’).val(’2′),默认就会选中第二条。

给我留言