DIV+CSS實現仿SELECT下拉框程式碼（JQUERY）
阿新 • • 發佈：2019-01-04
wangking 寫道
下拉框特點：
1.可自定義下拉框的高度和寬度。
2.無需使用者寫多餘程式碼，就和用原生態的SELECT一樣的原理，使用簡單。
3.功能強大，在下拉框中增加了extraData DIV層，供使用者自定義特殊需求，當然使用者也可以不選擇使用extraData DIV層，用普通的SELECT即可。
1.可自定義下拉框的高度和寬度。
2.無需使用者寫多餘程式碼，就和用原生態的SELECT一樣的原理，使用簡單。
3.功能強大，在下拉框中增加了extraData DIV層，供使用者自定義特殊需求，當然使用者也可以不選擇使用extraData DIV層，用普通的SELECT即可。
下拉框截圖：
具體程式碼：
<!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-left:10px;} .defaultItem{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+11); 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+1); 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){ //火狐下不支援toElement toElement = 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" class="select" style="width:521px;height:50px;"> <span class="defaultItem"><table><tr><td>請選擇...</td></tr></table></span> <ul class="items"> <li value="1111">選項一</li> <li value="2222">選項二</li> <li value="3333">選項三</li> <li value="4444">選項四</li> <li value="5555">選項五</li> <li value="6666">選項六</li> <li value="7777">選項七</li> <li value="8888">選項八</li> <li value="9999">選項九</li> <li value="0000">選項十</li> </ul> <div class="extraData"> <input type="text" id="aaa" value="Close"/> 這個DIV層屬於擴充套件層，使用者可根據自己需求確定是否需要這個。<input type="button" id="aaa" value="Close" onclick="closeSelect(this)"/></div> </div> <br/><br/><br/> <!-- 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> <!-- SELECT.......[結束] --><br/><br/><br/> <input type="text" 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: 歡迎共同討論交流。