DIV+CSS实现仿SELECT上拉框代码（JQUERY）
日期：2014-05-17 浏览次数：20868 次
DIV+CSS实现仿SELECT下拉框代码（JQUERY）
?
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-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(),l
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
