基于jquery的网页SELECT下拉框美化代码

218 阅读 0 评论 144 点赞

我是靠谱客的博主傻傻芒果，最近开发中收集的这篇文章主要介绍基于jquery的网页SELECT下拉框美化代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.解决了有些select 美化代码,无法触发原有select 控件的onchange 事件问题。
2.允许多次调用 $("...").selectCss()，以解决Select的options更新后无法同步的问题。

使用方法如下：

复制代码代码如下:

 
<!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>无标题文档</title> 
<link href="selectCss.css" rel="stylesheet" type="text/css" /> 
<script src="jquery-1.3.2.min.js" type="text/javascript"></script> 
<script src="selectCss.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("select").selectCss(); 
}); 
</script> 
</head> 
<body> 
<select name=""　onchange="alert(this.value)" id="select1"> 
<option value="1" title="选项选项选项选项" >选项1</option> 
<option value="2">选项2</option> 
<option value="3">选项3</option> 
</select> 
<select name="" id="select2"> 
<option value="1">选项31</option> 
<option value="2">选项32</option> 
<option value="3">选33</option> 
</select> 
</body> 
</html> 

主要文件包括 selectCss.css 和 selectCss.js
selectCss.js 文件代码:

复制代码代码如下:

 
(function($){ 
function hideOptions(speed){ 
if(speed.data){speed=speed.data} 
if($(document).data("nowselectoptions")) 
{ 
$($(document).data("nowselectoptions")).slideUp(speed); 
$($(document).data("nowselectoptions")).prev("div").removeClass("tag_select_open"); 
$(document).data("nowselectoptions",null); 
$(document).unbind("click",hideOptions); 
$(document).unbind("keyup",hideOptionsOnEscKey); 
} 
} 
function hideOptionsOnEscKey(e){ 
var myEvent = e || window.event; 
var keyCode = myEvent.keyCode; 
if(keyCode==27)hideOptions(e.data); 
} 
function showOptions(speed){ 
$(document).bind("click",speed,hideOptions); 
$(document).bind("keyup",speed,hideOptionsOnEscKey); 
$($(document).data("nowselectoptions")).slideDown(speed); 
$($(document).data("nowselectoptions")).prev("div").addClass("tag_select_open"); 
} 

$.fn.selectCss=function(_speed){ 
$(this).each(function(){ 
var speed=_speed||"fast"; 
if($(this).data("cssobj")){ 
$($(this).data("cssobj")).remove(); 
} 
$(this).hide(); 
var divselect = $("<div></div>").insertAfter(this).addClass("tag_select"); 
$(this).data("cssobj",divselect); 
var divoptions = $("<ul></ul>").insertAfter(divselect).addClass("tag_options").hide(); 
divselect.click(function(e){ 
if($($(document).data("nowselectoptions")).get(0) != $(this).next("ul").get(0)){ 
hideOptions(speed); 
} 
if(!$(this).next("ul").is(":visible")) 
{ 
e.stopPropagation(); 
$(document).data("nowselectoptions",$(this).next("ul")); 
showOptions(speed); 
} 
}); 
divselect.hover(function(){ 
$(this).addClass("tag_select_hover"); 
} 
, 
function(){ 
$(this).removeClass("tag_select_hover"); 
}); 
$(this).change(function(){ 
$(this).nextAll("ul").children("li:eq("+ $(this)[0].selectedIndex +")").addClass("open_selected").siblings().removeClass("open_selected"); 
$(this).next("div").html($(this).children("option:eq("+ $(this)[0].selectedIndex +")").text()); 
}); 
$(this).children("option").each(function(i){ 
var lioption= $("<li></li>").html($(this).text()).attr("title",$(this).attr("title")).appendTo(divoptions); 
if($(this).attr("selected")){ 
lioption.addClass("open_selected"); 
divselect.html($(this).text()); 
} 
lioption.data("option",this); 
lioption.click(function(){ 
lioption.data("option").selected=true; 
$(lioption.data("option")).trigger("change",true) 
}); 
lioption.hover( 
function(){$(this).addClass("open_hover");}, 
function(){ $(this).removeClass("open_hover"); } 
); 
}); 
}); 
} 
})(jQuery); 

selectCss.Css 文件代码:

复制代码代码如下:

 
.tag_select{display:block;color:#000;width:179px;height:23px;background:transparent url("images/index_22.jpg") no-repeat 0 0;padding:0 10px;line-height:23px; color:#7D7D7D; font-size:12px; cursor:pointer} 
.tag_select_hover{ color:#ff0000; background:transparent url("selectbg.jpg") no-repeat 0 0; } 
.tag_select_open{ color:#0000ff; background:transparent url("selectbg.jpg") no-repeat 0 0;} 
ul.tag_options{position:absolute;margin:0;list-style:none;background:#fff;padding:0 0 1px;margin:0;width:162px ; height:100px; overflow:hidden; overflow-y:auto; font-size:12px; margin-left:10px; cursor:pointer; z-index:1000 } 
ul.tag_options li{background:#fff; display:block;width:140px;padding:0 10px;height:20px;text-decoration:none;line-height:20px;color:#000; font-weight:normal; font-size:12px} 
ul.tag_options li.open_hover{background:#0000ff;color:#000; font-weight:normal; font-size:12px} 
ul.tag_options li.open_selected{background:#ccc; font-size:12px;font-weight:bold; } 

selectbg.jpg 图片: