您的位置: 首页  >  IT文章  >  DIV+CSS实现仿SELECT上拉框代码（JQUERY）

DIV+CSS实现仿SELECT上拉框代码（JQUERY）

分类: IT文章 • 2024-08-25 12:11:43
DIV+CSS实现仿SELECT下拉框代码（JQUERY）

 

wangking 写道
下拉框特点：
1.可自定义下拉框的高度和宽度。
2.无需用户写多余代码，就和用原生态的SELECT一样的原理，使用简单。
3.功能强大，在下拉框中增加了extraData   DIV层，供用户自定义特殊需求，当然用户也可以不选择使用extraData   DIV层，用普通的SELECT即可。

 

下拉框截图：


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){	//火狐下不支持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:500px;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: 欢迎共同讨论交流。

 

 

相关推荐