例子地址:http://download.csdn.net/detail/cyoubunketu/4131093 Email:cyoubunketu@126.com
/**
* jQuery ooppiu select Plugin 1.0.1
*
* Copyright (c) 2009 - 2012 oopiu
* Email: cyoubunketu@126.com
*/
$.extend({
oopiuSelectClickFlg:false,
oopiuInit: function($selects) {
if (!$selects){
$selects = $('select');
}
$selects.each(function(i) {
$this = $(this);
if (!this.id){
$this.attr("id","oopiu_auto_create_select_id"+i);
}
id = this.id;
oopiu_val_w = $this.width();
oopiu_val_p = $this.offset();
$this.hide();
oopiu_val_t = $this.oopiuCreateText(oopiu_val_w,id);
oopiu_val_img = $this.oopiuCreateTre(oopiu_val_w,oopiu_val_p,id);
$this.after(oopiu_val_t);
$("body").append(oopiu_val_img);
oopiu_val_dp = $(oopiu_val_t).offset();
oopiu_val_divLeft = oopiu_val_dp.left;
oopiu_val_divTop = oopiu_val_dp.top + $(oopiu_val_t).height();
oopiu_val_param = {left:oopiu_val_divLeft,top:oopiu_val_divTop,width:oopiu_val_w,selId:this.id};
var oopiu_val_divNode = $this.oopiuCreateDiv(oopiu_val_param);
$("body").append(oopiu_val_divNode);
});
$(document).click(function(){
if ($.oopiuSelectClickFlg == false){
$(".oopiu_select_div:visible").hide();
}
});
}
});
$.fn.extend({
oopiuSelectClick:function(id){
$(this).click(function(){
if ("none" == $("#" + id + "_div").css("display")){
$(".oopiu_select_div:visible").hide();
$.oopiuSelectClickFlg = true;
window.setTimeout(function(){$.oopiuSelectClickFlg = false;},300)
$("#"+id + "_div").slideDown("fast",$(this).oopiuFindRow(id));
}else{
$.oopiuSelectClickFlg = false;
$("#"+id + "_div").hide();
}
});
},
oopiuCreateText:function(w,id){
var oopiu_val_t = document.createElement("input");
$(oopiu_val_t).attr("id",id+"_text");
$(oopiu_val_t).attr("selId",id);
$(oopiu_val_t).attr("type","text");
$(oopiu_val_t).attr("value",$("#"+id+" option:selected").text());
$(oopiu_val_t).attr("readonly","true");
$(oopiu_val_t).css("width",w+15);
$(oopiu_val_t).css("marginTop",0);
$(oopiu_val_t).css("border","1px solid lightslategray");
$(oopiu_val_t).css("-webkit-border-radius","5px");
$(oopiu_val_t).css("-moz-border-radius","5px");
$(oopiu_val_t).css("cursor","pointer");
$(oopiu_val_t).css("padding-right","15px");
$(oopiu_val_t).hover(
function(){
$(this).css("border","1px solid lightsteelblue");
},
function(){
$(this).css("border","1px solid lightslategray");
}
);
$(oopiu_val_t).oopiuSelectClick(id);
return oopiu_val_t;
},
oopiuCreateTre:function(width,pos,id){
var oopiu_val_i = document.createElement("div");
$(oopiu_val_i).html('<em style="width:5px;"></em><em style="margin:0 1px;width:3px;"></em><em style="margin:0 2px;width:1px;"></em>');
$(oopiu_val_i).css({"position":"absolute","left":pos.left+width+6,"top":pos.top+8,"width":"5px","height":"5px","display":"block","overflow":"hidden"});
$(oopiu_val_i).css("cursor","pointer");
$(oopiu_val_i).find("em").each(function(){
$(this).css({"height":"1px","overflow":"hidden","display":"block","background-color":"#666666"});
});
$(oopiu_val_i).oopiuSelectClick(id);
return oopiu_val_i;
},
oopiuCreateDiv:function(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 + 13);
$(d).css("border","1px solid gray");
$(d).css("border-top-style","none");
$(d).css("font-size","12px");
$(d).css("backgroundColor","#FFF");
$(d).addClass("oopiu_select_div");
$(d).css("left",left);
$(d).css("top",top + 4);
if ($("#"+selId+" option").length > 11){
$(d).css("overflow","auto");
$(d).css("height",20 * 11);
}
$("#"+selId+" option").each(function(i){
value = this.value;
text = this.text;
a = $(this).oopiuCreateOptions({value:value,text:text,id:selId,width:width,row:i});
$(d).append(a);
});
$(d).hide();
$(d).attr("id",selId+"_div");
return d;
},
oopiuCreateOptions:function(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("innerHTML",pam.text);
$(td).css("padding","2");
$(td).css("height","20");
$(td).css("overflow","hidden");
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;
},
oopiuFindRow:function(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");
}
});
}
});