<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.111cn.net/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.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; }</style>
<script src="jquery-1.3.2.min.js" type="text/网页特效"></script>
<script type="text/javascript">(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);$(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>