用jquery給select加選中事件

select在前端開發過程當中很經常使用,如今咱們要實現一個效果,那就是選中select中的某一項,執行事件,原本本身沒怎麼接觸過這些,最後網上找了一些資料,本身研究了一下,把方法分享給你們,你們若是有須要的能夠直接拿過去用,固然這個方法在腦殘的IE裏也是支持的。html

我就演示一個簡單的效果吧前端

我要實現select選中裏面的第幾條,下面相應的li變顏色,下面是html代碼:jquery

<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實現了,下面是代碼:this

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

主要用到了一個change事件,而後改變給相應的li添加class。spa

PS 若是想要改變select默認的選擇項,能夠寫成這樣 $('#sel').val('2'),默認就會選中第二條。code

相關文章
相關標籤/搜索