select美化自定义下拉框样式js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 select美化自定义下拉框样式js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>select美化自定义下拉框样式</title>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;}
select{outline:none;}
ul{list-style:none;}
a{text-decoration:none;}
</style>


<link type="text/css" rel="stylesheet" href="style.css" />

<select name="choose" id="choose">
	<option value="选择风格" selected="selected">选择风格</option>
	<option value="复古风">复古风</option>
	<option value="摇滚风">摇滚风</option>
	<option value="怀旧风">怀旧风</option>
	<option value="怀旧风">怀旧风</option>
</select>

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.select.js"></script>
</body>
</html>

JS代码(jquery.select.js):

(function($){
	var selects=$('select');
	//获取selectfor(var i=0;
	i<selects.length;
	i++){
	createSelect(selects[i],i);
}
function createSelect(select_container,index){
	//创建select容器，class为select_box，插入到select标签前var tag_select=$('<div></div>');
	//div相当于select标签tag_select.attr('class','select_box');
	tag_select.insertBefore(select_container);
	//显示框class为select_showbox,插入到创建的tag_select中var select_showbox=$('<div></div>');
	//显示框select_showbox.css('cursor','pointer').attr('class','select_showbox').appendTo(tag_select);
	//创建option容器，class为select_option，插入到创建的tag_select中var ul_option=$('<ul></ul>');
	//创建option列表ul_option.attr('class','select_option');
	ul_option.appendTo(tag_select);
	createOptions(index,ul_option);
	//创建option//点击显示框tag_select.toggle(function(){
	ul_option.show();
}
,function(){
	ul_option.hide();
}
);
	var li_option=ul_option.find('li');
	li_option.on('click',function(){
	$(this).addClass('selected').siblings().removeClass('selected');
	var value=$(this).text();
	select_showbox.text(value);
	ul_option.hide();
}
);
	li_option.hover(function(){
	$(this).addClass('hover').siblings().removeClass('hover');
}
,function(){
	li_option.removeClass('hover');
}
);
}
function createOptions(index,ul_list){
	//获取被选中的元素并将其值赋值到显示框中var options=selects.eq(index).find('option'),selected_option=options.filter(':selected'),selected_index=selected_option.index(),showbox=ul_list.prev();
	showbox.text(selected_option.text());
	//为每个option建立个li并赋值for(var n=0;
	n<options.length;
	n++){
	var tag_option=$('<li></li>'),//li相当于optiontxt_option=options.eq(n).text();
	tag_option.text(txt_option).css('cursor','pointer').appendTo(ul_list);
	//为被选中的元素添加class为selectedif(n==selected_index){
	tag_option.attr('class','selected');
}
}
}
}
)(jQuery)

CSS代码(style.css):

select{display:none;}
.select_box{font-family:"宋体";font-size:12px;color:#999999;width:178px;line-height:20px;margin:50px auto;}
.select_showbox{border:1px solid #b0a296;height:20px;padding-left:5px;background:url(icon.png) no-repeat 156px 0;}
.select_option{border:1px solid #b0a296;border-top:none;display:none;}
.select_option li{padding-left:5px;}
.select_option li.selected{background-color:#F3F3F3;color:#999;}
.select_option li.hover{background:#7b6959;color:#fff;}

附件:下载该文件资源,减少时间成本(增值服务)