DIV+CSS实现仿SELECT下拉框代码（JQUERY）
?
?
具体代码：
?
<!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><script type="text/javascript" src="__JS__/jquery.min.js"></script><style type="text/css"><!--body {padding:10px;}* {margin:0; padding:0; font-size:12px;}ul,li {list-style-type:none;}.select {width:150px; height:25px; border:1px solid #ccc; padding-right:20px; padding-left:10px; background:url(__IMAGE__/select_arrow.gif) no-repeat right center white; }.select span {cursor:pointer; display:block; width:100%; height:100%;overflow:hidden;}.select table {height:100%;}.select td {vertical-align:middle;}.select ul{width:181px;}.select ul li {cursor:pointer;}.select .items {overflow-y: scroll; overflow-x: hidden;max-height:148px; height:148px;width:180px; position:absolute;border:1px dashed #ccc; background:#fff;z-index:999;display:none;}.select .items li {display:block; line-height:25px; padding-left:10px;}.select .hover,.onhover {background:#ccc;}.select .extraData{position:absolute;line-height:20px;padding-left:10px; padding-top:5px; padding-bottom:5px;border:1px dashed #ccc;background:white;display:none;}--></style><script type="text/javascript"> var isItemHover = 0;//ITEM是否正在HOVER使用，供清楚ONHOVER状态 var delayTime4Select = null;//延迟消失下拉框 var selectUsingObj = "";//正在使用哪个SELECT，供MOUSE OVER AND OUT时使用 var selectCloseUsing = 0;//是否在执行关闭操作 var isClickSelectTextObj = 0;//是否点击了SELECT控件里的输入框 $(document).ready(function(){ $(".select :text").click(function(){//当鼠标点击了.select里面的任何一个输入框，则取消掉[鼠标移出焦点后，自动消失事件]isClickSelectTextObj = 1;});$('.defaultItem').click(function(event){ //鼠标点击[请选择]，弹出下拉框if(selectCloseUsing == 1){return;}var parentObj = $(this).parent();if(selectUsingObj != "" && selectUsingObj != parentObj.attr("idtag")){$("[idtag='"+selectUsingObj+"']").find('ul.items').hide();$("[idtag='"+selectUsingObj+"']").find('.extraData').hide();}if(selectUsingObj != ""){//点击事件[执行关闭SELECT]操作clearTimeout(delayTime4Select);selectCloseUsing = 1;var itemsOBJ = parentObj.find('ul.items');;itemsOBJ.hide();var extraOBJ = $("[idtag='"+selectUsingObj+"']").find(".extraData");extraOBJ.hide();selectUsingObj = "";delayTime4Select = setTimeout(function(){selectCloseUsing = 0;isClickSelectTextObj = 0;},200);}else{//点击事件[执行打开SELECT]操作selectUsingObj = parentObj.attr("idtag");clearTimeout(delayTime4Select);var selectWidth = parentObj.width();//动态设置ul.items宽度var selectHeight = parentObj.height();//动态设置ul.items的TOP偏移量var id = parentObj.attr("idtag");var hiddenVal = "";//隐藏域的值，用来显示选中ITEM项var element=$("#"+id);if(element.length > 0){hiddenVal = $("#"+id).val();}var itemsOBJ = parentObj.find('ul.items');itemsOBJ.css("width",selectWidth+31);itemsOBJ.css({top:parentObj.offset().top+selectHeight,left:parentObj.offset().left});itemsOBJ.show(); //找到ul.items显示var extraOBJ = parentObj.find(".extraData");if(extraOBJ.length > 0){//SELECT额外数据DIV存在extraOBJ.css("width",selectWidth+21);extraOBJ.css({top:parentObj.offset().top+selectHeight+itemsOBJ.height(),left:parentObj.offset().left});extraOBJ.show();}parentObj.find('li').hover(function(){isItemHover = 1;$(this).addClass('hover');$(this).parent().find('li').removeClass('onhover');}, function(){$(this).removeClass('hover');});//li的hover效果if(isItemHover == 0){itemsOBJ.find("li").each(function(){if(hiddenVal == $(this).attr("value")){$(this).addClass('onhover');}});}}});$('.select,.extraData').mouseover(function(event){selectCloseUsing = 0;});$('.select,.extraData').mouseout(function(event){selectCloseUsing = 1;var toElement = null;if ($.browser.mozilla){//火狐下不支持toElementtoElement = event.relatedTarget;}else{toElement = event.toElement;}if($(this)[0].contains(toElement)){//如果是内部元素，则不执行以下代码return;}var itemsOBJ = null;if($(this).attr("class") == "select"){itemsOBJ = $(this).find('ul.items');}else{itemsOBJ = $(this).parents("div").find('ul.items');}delayTime4Select = setTimeout(function(){if(selectCloseUsing == 1 && isClickSelectTextObj == 0){itemsOBJ.hide();var extraOBJ = $("[idtag='"+selectUsingObj+"']").find(".extraData");if (extraOBJ.length > 0) {extraOBJ.hide();}isItemHover = 0;selectUsingObj = "";}},3000);});$('ul.items li').live("click",function(){selectCloseUsing = 1;var parentDiv = $(this).parents("div");parentDiv.find('td').html($(this).html());var id = parentDiv.attr("idtag");var element=$("#"+id);if(element.length > 0){$("#"+id).val($(this).attr("value"));}else{ parentDiv.after('<input type="hidden" id="'+id+'" name="'+id+'" value="'+$(this).attr("value")+'"/>');}parentDiv.find('ul').hide();var extraOBJ = $("[idtag='"+selectUsingObj+"']").find(".extraData");if (extraOBJ.length > 0) {extraOBJ.hide();}selectUsingObj = "";isItemHover = 0;delayTime4Select = setTimeout(function(){selectCloseUsing = 0;isClickSelectTextObj = 0;},200);});});//给firefox定义contains()方法，ie下不起作用if(typeof(HTMLElement)!="undefined"){ HTMLElement.prototype.contains=function(obj){ while(obj!=null&&typeof(obj.tagName)!="undefind"){ //通过循环对比来判断是不是obj的父元素 if(obj==this) return true; obj=obj.parentNode; } return false;}; }function closeSelect(obj){selectCloseUsing = 1;var itemsOBJ = $(obj).parents("div").find('ul.items');;itemsOBJ.hide();var extraOBJ = $("[idtag='"+selectUsingObj+"']").find(".extraData");extraOBJ.hide();selectUsingObj = "";delayTime4Select = setTimeout(function(){selectCloseUsing = 0;isClickSelectTextObj = 0;},200);}</script></head><body> <div idtag="name" style="width:500px;height:50px;"> <span id="aaa" value="Close"/>这个DIV层属于扩展层，用户可根据自己需求确定是否需要这个。<input type="button" id="aaa" value="Close" onclick="closeSelect(this)"/></div> </div><br/><br/><br/> <!-- SELECT.......[开始] --> <div idtag="users" id="testinput" /><br/><br/><br/> <input type="text" id="haha" /></body></html>?
?
怎么使用？如下：
?
INCLUDE CSS AND JS。。。。 THEN。。。这个是原生态的SELECT：<select name="users" id="users"> <option value="1">wangking</option> <option value="2">jiaojiao</option></select>则对应改为：<div idtag="users" class="select"> <span class="defaultItem"><table><tr><td>请选择...</td></tr></table></span> <ul class="items"> <li value="1">wangking</li> <li value="2">jiaojiao</li> </ul></div>?
?
PS: 欢迎共同讨论交流。
?
?