select在IE6下显示时存在问题，写了个jquery插件，隐藏原select，用js重新构建UI，对新UI的操作会映射到原select，支持默认选中，自适应宽和change事件
效果图
example.html
selectBox.js
效果图
example.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=gbk" />
<title>example</title>
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="js/selectBox/selectBox.css"/>
<script type="text/javascript" src="js/selectBox/selectBox.js"></script>
<script>
$().ready(function(){
$("#room").change(function(){alert("changed");});
$("select").selectBox();
});
</script>
<style>
body{font-size:14px}
</style>
</head>
<body>
<select name="room" id="room">
<option value="">请选择</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<label>A</label>
<select name="hall">
<option value="">请选择</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<label>B</label>
<select name="toilet">
<option value="">请选择</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">长字符串长字符串</option>
</select>
<label>C</label>
</body>
</html>
selectBox.js
;(function($) {
$.fn.extend({
"selectBox":function(value){
//=
var $this=this;
var jQuerySelectBoxCount=1;
var hideDragDown=function(){
$(".jQuerySelectBox .options").css("display","none")
};
$this.each(function(){
jQuerySelectBoxCount++;
var d=new Date();
var id="jQuerySelectBox"+d.getSeconds()+"_"+d.getMilliseconds()+"_"+jQuerySelectBoxCount;
var jQuerySelectBox=$("#"+id);
var original=$(this);
original.css("display","none");
var e="<div class='jQuerySelectBox' id='"+id+"'></div>";
$(e).insertAfter(original);
var current=$("<div class='current' index='0'> </div>").appendTo("#"+id);
var opts=$("<div class='options'></div>").appendTo("#"+id);
var down=$("<div class='down'></div>").appendTo("#"+id);
var dragDown=function(){//drag down the options
if($("#"+id+" .options").css("display")!="block"){
hideDragDown();
$("#"+id+" .options").css({
display : "block",
top : $("#"+id).offset().top+$("#"+id).height(),
left : $("#"+id).offset().left,
width : $("#"+id).width()
});
$("#"+id+" .options .option[index='"+current.attr("index")+"']").addClass("selected");
}else{
hideDragDown();
}
};
$(down).click(dragDown);
$(current).click(dragDown);
var options=original.children("option");
var o;
for(var i=0;i<options.length;i++){
o=original.find("option[index='"+i+"']");
var option="<div class='option' val='"+o.attr("value")+"' index='"+i+"'>";
option+=o.text();
option+="</div>";
var opt=$(option).appendTo(opts);
if(o.attr('selected')==true){//selected option
opt.addClass("selected");
$(current).html(o.text());
$(current).attr("index",i);
}
opt.click(function(){
current.html($(this).text());
if(current.attr("index")!=$(this).attr("index")){//if change
current.attr("index",$(this).attr("index"));
$(original).change();//invoke orignal select onchange
}
original.find("option[index='"+$(this).attr("index")+"']").attr("selected",true);
$(this).addClass("selected");
hideDragDown();
});
opt.mouseover(function(){
$(".jQuerySelectBox .options .option").removeClass("selected");
$(this).addClass("selected");
});
opt.mouseout(function(){
$(this).removeClass("selected");
});
}
$(current).width(opts.width());
$("#"+id).width(opts.width()+down.width()+2);
});
//=
}
});
})(jQuery);
