用 jQuery 制作模拟下拉框,改变你的下拉框样式

用 jQuery 制作模拟下拉框
传统的 Select 下拉框因为样式丑陋且无法随性更改样式而遭到了我的鄙夷,相信很多人都有此种观点。并且在ie6下,下拉框的优先级大于层,经常导致下拉框显示在层的上面。但是自从有了 Javascript,这些问题便不再是问题。最近正好在改版一个网站,要修改下拉框的样式,正好看到 CssRain 已经制作了这么一个很有用的插件,下面我就教大家怎么用 jQuery 制作一个模拟下拉框,从而实现对 Select 下拉框样式的定制。

思路:
通过已知的下拉框,把里面的数据循环出来,放到另一个div的ul列表里,
另一个div就是简单的弹出层而已。
通过hidden可以 获取下拉框的选中的值和文本 。

先看这段代码:

<script type="text/javascript">
/* 
Dev by CssRain.cn 
Test in IE6,IE7,Firefox3,Chrome
感谢 CssRain的这段插件代码
*/
jQuery.fn.CRselectBox = jQuery.fn.sBox = function(options){
	options = $.extend({
		animated : false
	},options);
	var _self = this;
	/*构建结构*/
	var _parent = _self.parent();
	var wrapHtml = '<div class="CRselectBox"></div>';
	var $wrapHtml = $(wrapHtml).appendTo(_parent);
	var selectedOptionValue = _self.find("option:selected").attr("value");
	var selectedOptionTxt = _self.find("option:selected").text();
	var name = _self.attr("name");
	var id = _self.attr("id");
	var inputHtml = '<input type="hidden" value="'+selectedOptionValue+'" name="'+name+'" id="'+id+'"/>';
	$(inputHtml).appendTo($wrapHtml);
	var inputTxtHtml = '<input type="hidden" value="'+selectedOptionTxt+'" name="'+name+'_CRtext" id="'+id+'_CRtext"/>';
	$(inputTxtHtml).appendTo($wrapHtml);
	var aHtml = '<a class="CRselectValue" href="#">'+selectedOptionTxt+'</a>';
	$(aHtml).appendTo($wrapHtml);
	var ulHtml = '<ul class="CRselectBoxOptions"></ul>';
	var $ulHtml = $(ulHtml).appendTo($wrapHtml);
	var liHtml = "";
	_self.find("option").each(function(){
		if($(this).attr("selected")){
			liHtml += '<li class="CRselectBoxItem"><a href="#" class="selected" rel="'+$(this).attr("value")+'">'+$(this).text()+'</a></li>';
		}else{
			liHtml += '<li class="CRselectBoxItem"><a href="#" rel="'+$(this).attr("value")+'">'+$(this).text()+'</a></li>';
		}
	});
	$(liHtml).appendTo($ulHtml);
	/*添加效果*/
	$( $wrapHtml, _parent).hover(function(){
		$(this).addClass("CRselectBoxHover");
	},function(){
		$(this).removeClass("CRselectBoxHover");
	});
	$(".CRselectValue",$wrapHtml).click(function(){
		$(this).blur();	
		if( $(".CRselectBoxOptions",$wrapHtml).is(":hidden") ){
			if(options.animated){
				$(".CRselectBoxOptions").slideUp("fast");
				$(".CRselectBoxOptions",$wrapHtml).slideDown("fast");
			}else{
				$(".CRselectBoxOptions").hide();
				$(".CRselectBoxOptions",$wrapHtml).show();
			}
		}
		return false;
	});
	$(".CRselectBoxItem a",$wrapHtml).click(function(){
		$(this).blur();
		var value = $(this).attr("rel");
		var txt = $(this).text();
		$("#"+id).val(value);
		$("#"+id+"_CRtext").val(txt);
		$(".CRselectValue",$wrapHtml).text(txt);
		$(".CRselectBoxItem a",$wrapHtml).removeClass("selected");
		$(this).addClass("selected");
		if(options.animated){
			$(".CRselectBoxOptions",$wrapHtml).slideUp("fast");
		}else{
			$(".CRselectBoxOptions",$wrapHtml).hide();
		}
		return false;
	});
	$(document).click(function(event){
		if( $(event.target).attr("class") != "CRselectBox" ){
			if(options.animated){
			$(".CRselectBoxOptions",$wrapHtml).slideUp("fast");
			}else{
				$(".CRselectBoxOptions",$wrapHtml).hide();
			}
		}
	});
	_self.remove();
	return _self;
}
 
})
</script>

当然既然是 jQuery 实现的,自然别忘了载入 jQuery 的库哦!
Via

至于怎么用呢,看下面这段代码:

<script type="text/javascript">
$(function(){
	$("#abc").CRselectBox();      //#abc 为你的下拉框select的ID
</script>

只要给你的下拉框 Select 一个 ID 值即可,其余的就交给上述的 jQuery 插件了。

CSS部分自行定义:

.CRselectBox {}
.CRselectBoxHover {}
.CRselectBox a.CRselectValue {}
.CRselectBoxOptions {}
.CRselectBoxOptions a{}
.CRselectBoxOptions a:hover{}
.CRselectBoxOptions a.selected{}
/* 解决 firefox 点击放大出现虚线框,从而导致滚动条的问题  */
.CRselectBox a { 
	outline: none; 
	text-decoration:none;
}
.CRselectBox a:focus { 
	outline: none; 
	text-decoration:none;
}

View Demo jQuery Select

ZIP File34.45 kB 共被下载2141次

25 Responses to 用 jQuery 制作模拟下拉框,改变你的下拉框样式

  1. Showfom says:

    沙发是我的吧!

  2. welee says:

    这个非常实用呢!!

  3. welee says:

    发现当所选项目太长时会超出搜索框

  4. xiaorsz says:

    我的留言哩?

  5. yinheli says:

    哈哈.我是来下demo的.以后用的上 :mrgreen:

  6. Leeiio says:

    @Showfom 速度真快!
    @welee 呃,搜索框的样式就不要苛刻要求我了哈,我这里只提供制作下拉框的方法。
    @xiaorsz 啥子?
    @yinheli 本博客不会倒闭,欢迎日后使用搜索功能~

  7. yinheli says:

    @Leeiio
    看来我说错话了….(- -!)

  8. Showfom says:

    @Leeiio
    博客放在国外确实不好,今天我的国外的主机抽风了,郁闷!

  9. xiaorsz says:

    我刚留言了,可发表了却没看见,诡异了,呵呵!!

  10. 吖Bee says:

    我是来收藏的~~哈哈

  11. cssrain says:

    只是提供原理, 样式的问题,可能要自己修改。
    谢谢leeiio。

  12. Leeiio says:

    @yinheli
    哈哈,言重了。
    @Showfom
    國外也又國外的好啊,國外不用備案。
    @xiaorsz
    呃,沒準數據庫那時候腦殘了。
    @cssrain
    是我謝謝你的插件哈。

  13. Showfom says:

    @Leeiio
    关键是,我05年就备案的……哎

  14. eddie says:

    不错 日后需要用到我会想到leeiio的 😀

  15. Lorz says:

    “继续在这片热土上插上你的小红花吧…”

  16. Arcthur says:

    相当有用的功能,以后会用到吧~

  17. 吖Bee says:

    失踪啦~~这么久不露面~

  18. 吖Bee says:

    这么久还不露面?

    五一节快乐啦~

  19. Leeiio says:

    @吖Bee
    哈哈,五一快樂!最近忙得很~

  20. Pingback: RSSA频道 » Blog Archive » 桌面便签小软件ATnotes – 提醒你勿忘临时小需求!

  21. feihongly says:

    CSSrain的那个插件问题不少,所以最后我自己写了个。。。。

  22. Leeiio says:

    @feihongly
    呵呵 我也准备自己写一个

  23. 香樟树 says:

    不错,收下了,呵呵

Leave a Reply

Your email address will not be published. Required fields are marked *