模擬select的代碼
更新時間：2011年10月19日 19:34:57 作者：
模擬select的代碼，使用jquery的朋友可以參考下。
幾年前不知道在哪下載的源碼上改的，去年開始學(xué)jquery，就改了一下，代碼有點亂。
只是自己用，沒有考慮寫成通用的組件，所以童鞋們?nèi)绻娴囊萌ビ玫脑捰悬c麻煩
幾個狀態(tài)，展開收起是jquery的slide
這個模擬select，只是很簡單的實現(xiàn)了單獨一個select的部分功能
沒有實現(xiàn)比如optgroup，文字長度自適應(yīng)（圖片會因此修改麻煩）
再說如果頁面多個select，css處理也麻煩，
數(shù)據(jù)、聯(lián)動都要增加大量代碼
小有小的好處，所以就不考慮進行封裝，
這里有不少童鞋做的比我好很多，功能很強大
再所以，就偷一下懶，在這里送上js注釋給初學(xué)者
$(document).ready(function(){
var newSelect = $("#aa");
newSelect.click(function(e){
//如果沒有class，即關(guān)閉狀態(tài)，就展開
//打開狀態(tài)就不需要處理，冒泡執(zhí)行document.click
if(this.className == ""){
this.className = "open";
$(this.nextSibling).slideDown("fast");
e.stopPropagation();//阻止冒泡
}
});
//關(guān)閉收起
function closeSelect(obj){
$(obj.nextSibling).slideUp("fast",function(){
obj.className = "";
});
}
$(document).bind("click", function() {
closeSelect(newSelect[0]);
});
newSelect.next().click(function(e){
var src = e.target;
//如果有選中任何一項，取選中文字執(zhí)行替換操作并改變樣式，相當(dāng)于select.onchange
//冒泡執(zhí)行document.click關(guān)閉收起
if(src.tagName == "A"){
var PObj = src.parentNode;
PObj.previousSibling.innerHTML = src.innerHTML;
$(src).siblings().removeClass();
src.className = "current";
PObj.nextSibling.value = src.getAttribute("value");
}
});
});
演示地址：http://demo.jb51.net/js/2011/jquery_select/
打包下載：http://m.fzitv.net/jiaoben/39490.html
只是自己用，沒有考慮寫成通用的組件，所以童鞋們?nèi)绻娴囊萌ビ玫脑捰悬c麻煩
幾個狀態(tài)，展開收起是jquery的slide
這個模擬select，只是很簡單的實現(xiàn)了單獨一個select的部分功能
沒有實現(xiàn)比如optgroup，文字長度自適應(yīng)（圖片會因此修改麻煩）
再說如果頁面多個select，css處理也麻煩，
數(shù)據(jù)、聯(lián)動都要增加大量代碼
小有小的好處，所以就不考慮進行封裝，
這里有不少童鞋做的比我好很多，功能很強大
再所以，就偷一下懶，在這里送上js注釋給初學(xué)者
復(fù)制代碼 代碼如下:
$(document).ready(function(){
var newSelect = $("#aa");
newSelect.click(function(e){
//如果沒有class，即關(guān)閉狀態(tài)，就展開
//打開狀態(tài)就不需要處理，冒泡執(zhí)行document.click
if(this.className == ""){
this.className = "open";
$(this.nextSibling).slideDown("fast");
e.stopPropagation();//阻止冒泡
}
});
//關(guān)閉收起
function closeSelect(obj){
$(obj.nextSibling).slideUp("fast",function(){
obj.className = "";
});
}
$(document).bind("click", function() {
closeSelect(newSelect[0]);
});
newSelect.next().click(function(e){
var src = e.target;
//如果有選中任何一項，取選中文字執(zhí)行替換操作并改變樣式，相當(dāng)于select.onchange
//冒泡執(zhí)行document.click關(guān)閉收起
if(src.tagName == "A"){
var PObj = src.parentNode;
PObj.previousSibling.innerHTML = src.innerHTML;
$(src).siblings().removeClass();
src.className = "current";
PObj.nextSibling.value = src.getAttribute("value");
}
});
});
演示地址：http://demo.jb51.net/js/2011/jquery_select/
打包下載：http://m.fzitv.net/jiaoben/39490.html
相關(guān)文章
基于jquery實現(xiàn)圖片廣告輪換效果代碼，需要的朋友可以參考下。2011-07-07
jQuery增加了并擴展了基本的事件處理機制，不但提供了更加優(yōu)雅的事件處理語法，而且極大地增強了事件處理能力。本文將對此進行詳細(xì)介紹，需要的朋友一起來看下吧2016-12-12
從零開始學(xué)習(xí)jQuery (四) jQuery中操作元素的屬性與樣式
本篇文章講解如何使用jQuery獲取和操作元素的屬性和CSS樣式. 其中DOM屬性和元素屬性的區(qū)分值得大家學(xué)習(xí).2011-02-02
下面代碼可以把一個頁面容器中的表單元素封裝成一個json對象2013-11-11
這些jQuery插件同樣可以實現(xiàn)圖片和內(nèi)容的滑塊效果。下面的這些jQuery插件的Demo網(wǎng)站我都測試了一些，都可以正常訪問，我相信那么多款插件中總會有你喜歡的2014-12-12
jquery 全選、全不選、反選效果的實現(xiàn)代碼【推薦】
下面小編就為大家?guī)硪黄猨query 全選、全不選、反選效果的實現(xiàn)代碼【推薦】。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
圖片放大在某些例如商品細(xì)節(jié)放大圖比較常見，本文寫了一個圖片放大的示例適合日常應(yīng)付，有需求的朋友可以參考下2013-08-08
jquery超簡單實現(xiàn)手風(fēng)琴效果的方法
這篇文章主要介紹了jquery超簡單實現(xiàn)手風(fēng)琴效果的方法,只需要幾行代碼即可實現(xiàn)手風(fēng)琴效果的樣式變換功能,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了jq 用each遍歷循環(huán)的方法，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了jQuery驗證元素是否為空的兩種常用方法,實例分析了兩種常用的判斷為空技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03