用dl模拟实现可自定义样式的SELECT下拉列表

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!doctype html>
<html>
<head>
<meta charset="gbk">
<title>用dl模拟实现可自定义样式的SELECT下拉列表@Mr.Think</title>
<style> 
body,h1,h2,h3,h4,h5,h6,div,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53}
body{_overflow:auto;_height:100%;margin:0 auto;}
html{_overflow:hidden}
h1,h2,h3,h4,h5,h6{font-size:100%}
address,cite,dfn,em,var{font-style:normal}#demo{position:relative;width:500px;height:300px;border:1px solid #ccc}
#demo dl.tips{margin:2px;padding:8px;background:#f2f2f2;line-height:24px}
#demo dl.tips dt{font-size:14px;font-weight:bolder}
#demo dl.tips dd{text-indent:24px}
#demo dl.tips dd input{padding:5px 5px;border:1px solid #444;width:200px;}
.selecttagbox{position:absolute;top:170px;left:50%;margin-left:-120px;z-index:999}
.selectitem{overflow:hidden;width:180px;height:30px;background:#dff0f0;font-size:14px;line-height:30px;filter:alpha(opacity:80);opacity:0.8;cursor:pointer}
.selectitem dt,.selectitem dd{padding-left:28px;background:transparent url(http://mrthink.net/demo/images/20101031sprite.png) 30px 0 no-repeat}
.selectitem dt.drop{background-position:0 -30px;}
.selectitem dt.shrink{background-position:0 0}
.selectitem dd.hover{background-color:#b6e2e2}
.selectitem dl .tag_news{background-position:0 -60px;color:#bd0000}
.selectitem dl .tag_it{background-position:0 -90px;color:#0759E0}
.selectitem dl .tag_reading{background-position:0 -120px;color:#409513}
.selectitem dl .tag_interests{background-position:0 -150px;color:#EE7D0E}
.selectitem dl .tag_career{background-position:0 -180px;color:#000382}
.selectitem dl .tag_living{background-position:0 -210px;color:#733900}
.selectitem dl .tag_sports{background-position:0 -240px;color:#9B018B}
 #demo .demo_b{top:210px;margin-left:-90px;z-index:888}
#demo .demo_c{top:250px;margin-left:-60px;z-index:777}
</style>
</head>
<body>
<div id="d_head">

<div id="demo">
<dl class="tips">
<dt>用dl模拟实现可自定义样式的SELECT下拉列表</dt>
<dd>1. 充分考虑用户体验, 快速划过不会触发;</dd>
<dd>2. 可根据需求自定义各种样式;</dd>
<dd>3. 考虑后台程序,预留传值接口;</dd>
<dd>4. 如果你有兴趣, 你还可以改进成即可输入值又可下拉的下拉列表.</dd>	
<dd><strong>下拉列表的值传到这儿</strong><input id="selectval" /></dd>
</dl>
 
<div class="selecttagbox">
<div class="selectitem">
        <dl>
			<dt class="shrink">请选择标签类别</dt>
			<dd class="tag_news">时事&nbsp;新闻</dd>
			<dd class="tag_it">技术互联网&nbsp;新玩意儿 </dd>
			<dd class="tag_reading">读书&nbsp;音乐&nbsp;影视</dd>
			<dd class="tag_interests">兴趣&nbsp;爱好&nbsp;活动</dd>
			<dd class="tag_career">事业&nbsp;理财</dd>
			<dd class="tag_living">生活&nbsp;情感</dd>
			<dd class="tag_sports">娱乐&nbsp;体育</dd>
		</dl>
</div>
</div>
 
<div class="selecttagbox demo_b">
<div class="selectitem">
        <dl>
			<dt class="shrink">请选择标签类别</dt>
			<dd class="tag_news">时事&nbsp;新闻</dd>
			<dd class="tag_it">技术互联网&nbsp;新玩意儿 </dd>
			<dd class="tag_reading">读书&nbsp;音乐&nbsp;影视</dd>
			<dd class="tag_interests">兴趣&nbsp;爱好&nbsp;活动</dd>
			<dd class="tag_career">事业&nbsp;理财</dd>
			<dd class="tag_living">生活&nbsp;情感</dd>
			<dd class="tag_sports">娱乐&nbsp;体育</dd>
		</dl>
</div>
</div>
 
<div class="selecttagbox demo_c">
<div class="selectitem">
        <dl>
			<dt class="shrink">请选择标签类别</dt>
			<dd class="tag_news">时事&nbsp;新闻</dd>
			<dd class="tag_it">技术互联网&nbsp;新玩意儿 </dd>
			<dd class="tag_reading">读书&nbsp;音乐&nbsp;影视</dd>
			<dd class="tag_interests">兴趣&nbsp;爱好&nbsp;活动</dd>
			<dd class="tag_career">事业&nbsp;理财</dd>
			<dd class="tag_living">生活&nbsp;情感</dd>
			<dd class="tag_sports">娱乐&nbsp;体育</dd>
		</dl>
</div>
</div>
 
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script> 
/*******************************
 * @author Mr.Think
 * @author blog http://mrthink.net/
 * @2010.10.31
 * @可自由转载及使用,但请注明版权归属
 *******************************/
;(function($){
    $.fn.extend({
        iSelect: function(options){
            var iset = {
                name: $('.selectitem'), //容器
                select: $('.selectitem>dl'), //dl列表
                dropCSS: 'drop', //收藏状态dt的样式
                shrinkCSS: 'shrink', //展开状态dt的样式
                hoverCSS: 'hover', //鼠标划过dd时的样式
                clearTime: 100, //允许用户快速划过不触发的时间(ms)
                dropTime: 100, //展开时间(ms)
                shrinkTime: 100, //收缩时间(ms)
                selectVal: null//选择的值传到此元素中
            }
            options=$.extend(iset, options || {});
            var mainHeight = iset.name.height();//容器高度
            var selectHeight = iset.select.height(); //dl实际高度
            var curTxt = iset.select.find('dt').html(); //dt默认html内容
            var self = null;
            var hoverElem = null; //避免用户快速划过时触发事件
            iset.name.each(function(){
                $(this).hover(function(){
                    self = this;
                    hoverElem = setTimeout(function(){
                        $(self).stop(true, false).animate({ //鼠标划过时,展开dl
                            height: selectHeight
                        }, iset.dropTime);
                        if ($(self).find('dt').html() == curTxt) { //判断是否有选择下拉列表,若无则改变dt样式
                            $(self).find('dt').attr('class', iset.dropCSS);
                        }
                        //dd的鼠标事件
                        $(self).find('dd').mouseover(function(){
                            $(this).addClass(iset.hoverCSS).siblings().removeClass(iset.hoverCSS);
                        }).mousedown(function(){ //鼠标点击时取值并赋给dt
                            $(self).find('dt').html($(this).html()).attr('class', $(this).attr('class'));
							//为表单传值
							if(iset.selectVal){
								iset.selectVal.val($(this).html());
							}
                            $(self).stop(true, false).animate({
                                height: mainHeight
                            }, iset.shrinkTime);
                        }).removeClass(iset.hoverCSS);
                    }, iset.clearTime);
                }, function(){
                    //鼠标移出后触发的事件
                    clearTimeout(hoverElem);
                    $(self).stop(true, false).animate({
                        height: mainHeight
                    }, iset.shrinkTime);
                    if ($(self).find('dt').html() == curTxt) {
                        $(self).find('dt').attr('class', iset.shrinkCSS);
                    }
                });
            })
        }
    })
})(jQuery);
//使用方法
$(function(){
	//默认调用 
	$('#demo').iSelect({selectVal:$('input#selectval')});
	
//传入自定义值的调用 方法
//	$('.demo_a')({
//		name:$('yourcss'),
//		select: $('.yourcss>dl'), 
//      dropCss: 'yourdrop', 
//      shrinkCss: 'yourshrink',
//      hoverCss: 'yourhover',
//      clearTime: 200, 
//		dropTime: 200,
//      shrinkTime: 200,
//      selectVal:$('input')
//	});
})
</script>
<script> 
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script> 
try {
var pageTracker = _gat._getTracker("UA-15924173-1");
pageTracker._trackPageview();
} catch(err) {}
</script>

</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

用dl模拟实现可自定义样式的SELECT下拉列表

分类

表单按钮

描述

用dl模拟实现可自定义样式的SELECT下拉列表: <br>　　1. 充分考虑用户体验, 快速划过不会触发; <br>　　2. 可根据需求自定义各种样式; <br>　　3. 考虑后台程序,预留传值接口; <br>　　4. 如果你有兴趣, 你还可以改进成即可输入值又可下...