Email:cyoubunketu@126.com
<html>
<head>
<script type="text/javascript" language="JavaScript" src="jquery.js"></script>
<script>
$(document).ready(function() {
$("select").each(function(i) {
if (null == this.id || "" == this.id){
$(this).attr("id","jQuery_auto_create_select_id"+i);
}
id = this.id;
jquery_val_w = $(this).width();
jquery_val_p = $(this).offset();
$(this).hide();
jquery_val_t = ct(jquery_val_w,id);
jquery_val_img = ci(jquery_val_w,id);
$(jquery_val_img).click(function(){
if ("none" == $("#" + this.selId + "_div").css("display")){
$("#"+this.selId + "_div").slideDown("fast",findRow(this.selId));
}else{
$("#"+this.selId + "_div").hide();
}
});
$(this).after(jquery_val_img);
$(jquery_val_img).before(jquery_val_t);
$(jquery_val_t).click(function(){
if ("none" == $("#" + this.selId + "_div").css("display")){
$("#"+this.selId + "_div").slideDown("fast",findRow(this.selId));
}else{
$("#"+this.selId + "_div").hide();
}
});
jquery_val_dp = $(jquery_val_t).offset();
jquery_val_divLeft = jquery_val_dp.left;
jquery_val_divTop = jquery_val_dp.top + $(jquery_val_t).height();
jquery_val_param = {left:jquery_val_divLeft,top:jquery_val_divTop,width:jquery_val_w,selId:this.id};
var jquery_val_divNode = cd(jquery_val_param);
$("body").append(jquery_val_divNode);
});
$("body").click(function(){
var divs = $("div").filter(".jQuery_select_div");
$(divs).each(function(){
$(this).hide();
});
});
//alert(document.body.outerHTML);
});
function findRow(id){
var showText = $("#"+id+"_text").val();
$("#"+id+"_div > table").each(function(){
txt = $(this).find("td").text();
$(this).css("background","");
if (showText == txt){
$(this).css("background","whitesmoke");
}
});
}
function ct(w,id){
var jquery_val_t = document.createElement("input");
$(jquery_val_t).attr("id",id+"_text");
$(jquery_val_t).attr("selId",id);
$(jquery_val_t).attr("type","text");
$(jquery_val_t).attr("value",$("#"+id+" option:selected").text());
$(jquery_val_t).attr("readonly","true");
$(jquery_val_t).css("width",w - 15);
$(jquery_val_t).css("marginTop",0);
$(jquery_val_t).css("border","1px solid #d3e4ec");
$(jquery_val_t).css("border-right-style","none");
$(jquery_val_t).css("cursor","hand");
$(jquery_val_t).hover(
function(){
$(this).css("border","1px solid lightsteelblue");
$(this).css("border-right-style","none");
},
function(){
$(this).css("border","1px solid #d3e4ec");
$(this).css("border-right-style","none");
}
);
return jquery_val_t;
}
function ci(jquery_val_w,id){
var jquery_val_i = document.createElement("img");
$(jquery_val_i).attr({src:"sanjiao.gif"});
$(jquery_val_i).attr("height","19");
$(jquery_val_i).attr("selId",id);
$(jquery_val_i).css("cursor","hand");
$(jquery_val_i).css("verticalAlign","bottom");
$(jquery_val_i).css("margin-bottom","1px");
$(jquery_val_i).mousedown(function(){$(this).fadeTo("fast",0.3)});
$(jquery_val_i).mouseup(function(){$(this).fadeTo("fast",1)});
$(jquery_val_i).hover(
function(){
$(this).fadeTo("fast",0.7);
},
function(){
$(this).fadeTo("fast",1);
}
);
return jquery_val_i;
}
function cd(param){
var left = param.left;
var top = param.top;
var width = param.width;
var selId = param.selId;
var d = document.createElement('div');
$(d).css("position","absolute");
$(d).css("width",width + 3);
$(d).css("border","1px solid #d3e4ec");
$(d).css("border-top-style","none");
$(d).css("font-size","12px");
$(d).css("backgroundColor","#FFF");
$(d).addClass("jQuery_select_div");
d.style.posLeft = left;
d.style.posTop = top + 4;
if ($("#"+selId+" option").length > 11){
$(d).css("overflow-y","auto");
$(d).css("height",20 * 11);
$(d).css("scrollbar-face-color","#eef6f9");
$(d).css("scrollbar-highlight-color","#d8eff8");
$(d).css("scrollbar-shadow-color","#d8eff8");
$(d).css("scrollbar-3dlight-color","#d8eff8");
$(d).css("scrollbar-arrow-color","#7fbfe5");
$(d).css("scrollbar-track-color","#eef6f9");
$(d).css("scrollbar-darkshadow-color","#48486c");
$(d).css("scrollbar-base-color","#eef6f9");
}
$("#"+selId+" option").each(function(i){
value = this.value;
text = this.text;
a = ca({value:value,text:text,id:selId,width:width,row:i});
$(d).append(a);
});
$(d).hide();
$(d).attr("id",selId+"_div");
return d;
}
function ca(pam){
var id = pam.id;
var tbl = $("<table></table>");
var trNode = $("<tr></tr>");
var td = $("<td></td>");
$(tbl).css("width","100%");
$(tbl).css("cursor","hand");
$(tbl).css("table-layout","fixed");
$(tbl).css("font-size","12px");
$(tbl).attr("cellSpacing","0");
$(tbl).hover(function(){$(td).css("background","gainsboro")},function(){$(td).css("background","")});
$(td).attr("value",pam.value);
$(td).attr("innerText",pam.text);
$(td).css("padding","2");
$(td).css("height","20");
if (pam.text.length * 12 > pam.width){
$(td).attr("title",pam.text);
}
$(td).css("white-space","nowrap");
$(td).click(function(){
$("#"+id+"_div").hide();
$("#"+id)[0].selectedIndex = pam.row;
$("#"+id+"_text").attr("value",pam.text);
$("#"+id).change();
});
td.appendTo(trNode);
trNode.appendTo(tbl);
return tbl;
}
</script>
</head>
<body>
<select onchange="alert(this.value)" style="width:50px">
<option value="1">第一步</option>
<option value="2">第二步</option>
<option value="3">第三步长长长长长长</option>
<option value="4">第四步</option>
<option value="5">11111</option>
</select>
<select onchange="alert(this.value)" style="width:50px">
<option value="1">第一步</option>
<option value="2">第二步</option>
<option value="3">第三步长长长长长长</option>
<option value="4">第四步</option>
<option value="5">11111</option>
</select>
<select onchange="$('#ct').attr('value',($(this).find('option:selected').text()))">
<option value="1">第一步</option>
<option value="2">第二步</option>
<option value="3">第三步</option>
<option value="4">第四步</option>
</select>
<input type="text" name="ct" id="ct" onfocus="this.blur()">
<br>
<select style="width:500px" id="test" onchange="alert(this.id)">
<option value="1">第一步</option>
<option value="">第二步</option>
<option value="3">第三步</option>
<option value="4">第四步</option>
</select>
<div style="position:absolute;left:500;top:500">
<select onchange="alert(this.value)" id="sel4">
<option value="0"></option>
<option value="1">一</option>
<option value="2">二</option>
<option value="3">三</option>
<option value="4">四</option>
<option value="5">五</option>
<option value="6">六</option>
<option value="7">七</option>
<option value="8">八</option>
<option value="9">九</option>
<option value="10">十</option>
<option value="11">十一</option>
<option value="12">十二</option>
<option value="13" selected>十三</option>
<option value="0"></option>
<option value="1">一</option>
<option value="2">二</option>
<option value="3">三</option>
<option value="4">四</option>
<option value="5">五</option>
<option value="6">六</option>
<option value="7">七</option>
<option value="8">八</option>
<option value="9">九</option>
<option value="10">十</option>
<option value="11">十一</option>
<option value="12">十二</option>
<option value="0"></option>
<option value="1">一</option>
<option value="2">二</option>
<option value="3">三</option>
<option value="4">四</option>
<option value="5">五</option>
<option value="6">六</option>
<option value="7">七</option>
<option value="8">八</option>
<option value="9">九</option>
<option value="10">十</option>
<option value="11">十一</option>
<option value="12">十二</option>
</select>
<input type="button" value="ok" onclick="alert($('#sel4').val())">
</div>
<select id="sel5" onchange="alert($(this).find('option:selected').text())">
<option>没有值1</option>
<option>没有值2</option>
<option>没有值3</option>
<option>没有值4</option>
</select>
<input type="button" value="ok" onclick="alert($('#sel5').find('option:selected').text())">
</body>
</html>
分享到：
相关推荐
用jquery1.3实现下拉框的美化，包含jquery1.3类库和一个例子。只实现了onchange方法，其他的可以自己扩展
jQuery select下拉框美化代码基于jquery.1.10.2.min.js制作，点击下拉框，显示下拉框内容。
80、jquery select下拉框美化代码
ui-select.js下拉框美化插件是一款能增强和美化网页默认select下拉框元素的jQuery Select下拉框美化代码，并且在所有浏览器中样式显示一致。
带搜索框的jQuery下拉框美化插件;带搜索框的jQuery下拉框美化插件;带搜索框的jQuery下拉框美化插件
代码简介：jQuery Select下拉框美化特效是一款绿色清新风格的带有滚动条下拉框代码。
jQuery下拉框美化插件selectList是一款简单、轻量级、跨浏览器的jquery下拉框模拟插件，支持键盘操作选项、支持ESC关闭下拉框。
jQuery下拉框美化插件是一款带图标的5种主题方形select下拉框选择美化样式代码。
jQuery Select下拉框美化插件.zip
JQuery select下拉框美化插件是一款jquery结合jQueryUI对select下拉框美化以及功能性禁用的js插件。
jquery select下拉框美化代码是一款基于jQuery实现的点击展开下拉框菜单选择代码。
jQuery自定义下拉框是一款经过美化的自定义下拉表单特效。
但是今天我们要为大家分享一款基于jQuery的Select下拉框美化插件，它完全重写了浏览器默认的Select下拉框样式，而且在下拉菜单展开时还伴随淡如淡出的动画效果，非常不错。当然我们以前也分享过一些类似的插件，可以...
这是一款基于jquery.selectlist.js插件实现的下拉框美化特效，简单的jQuery select下拉框美化代码。 js代码 [removed][removed] [removed][removed] [removed] $(function(){ $('select').selectlist({ ...
jQuery Select下拉框美化表单基于jquery.selectlist.js和jquery-1.9.1.min.js制作，适用于招聘网站，下拉框选择学历和工资要求。
jQuery下拉框美化插件fancyspinbox是一款支持动画滚动效果，支持键盘方向键切换选项值。
jquery实现select下拉框美化特效源码.zip