jquery取消選擇select下拉框示例代碼
更新時間:2014年02月22日 09:03:19 作者:
本篇文章主要是對jquery取消選擇select下拉框示例代碼進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助
有三個select下拉框
一個大類,兩個小類隱藏,需要在選擇大類的時候,小類顯示同時清除另外的小類選擇的項
這需求有點兒..........
下面是三個select:
復(fù)制代碼 代碼如下:
<select name="pWaqqqy" id="sel_type" onchange="selectFunction()">
<option value="">全部</option>
<option value="7">aa</option>
<option value="8">bb</option>
</select>
<select name="pWay" id="sel_children0" style="display:none;">
<option value="">全部</option>
<option value="5">a</option>
<option value="3">a</option>
<option value="1">a</option>
<option value="2">a</option>
<option value="6">a</option>
</select>
<select name="pWay" id="sel_children1" style="display:none;">
<option value="">全部</option>
<option value="4">b</option>
</select>
jquery擴展,調(diào)用時,使用$("select").removeSelected();
復(fù)制代碼 代碼如下:
jQuery.fn.removeSelected = function() {
this.val("");
};
大類選擇框選中時,調(diào)用selectFunction()方法:
復(fù)制代碼 代碼如下:
function selectFunction(){
if($("#sel_type").val()=="7"){
$("#sel_children0").show();
$("#sel_children1").hide();
$("#sel_children1").removeSelected();
}else if($("#sel_type").val()=="8"){
$("#sel_children1").show();
$("#sel_children0").hide();
$("#sel_children0").removeSelected();
}else{
$("#sel_children0").hide().removeSelected();
$("#sel_children1").hide().removeSelected();
}
}
前提是先引入jquery.js文件
相關(guān)文章
jquery實現(xiàn)固定頂部導(dǎo)航效果(仿蘑菇街)
蘑菇街導(dǎo)航固定頂部的效果想必大伙有所關(guān)注吧,想實現(xiàn)吧,本文將帶你走完實現(xiàn)之旅,接下來的代碼是使用jquery,感興趣的各位可不要錯過了哈2013-03-03jQuery動態(tài)地獲取系統(tǒng)時間實現(xiàn)代碼
jquery獲取當(dāng)前年份、獲取當(dāng)前月份(0——11),具體思路及代碼如下,感興趣的朋友可以參考下哈,希望可以幫助到你2013-05-05JQuery的ready函數(shù)與JS的onload的區(qū)別詳解
這篇文章主要介紹了JQuery的ready函數(shù)與JS的onload的區(qū)別,有需要的朋友可以參考一下2013-11-11JQuery 構(gòu)建客戶/服務(wù)分離的鏈接模型中Table分頁代碼效率初探
JQuery構(gòu)建客戶/服務(wù)分離的鏈接模型中Table分頁代碼效率初探!2010-01-01基于jQuery實現(xiàn)的水平和垂直居中的div窗口
在建立網(wǎng)頁布局的時候,我們經(jīng)常會面臨一個問題,就是讓一個div實現(xiàn)水平和垂直居中,雖然好幾種方式實現(xiàn),但是今天介紹時我最喜歡的方法,通過css和jQuery實現(xiàn)。2011-08-08