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: 歡迎共同討論交流。