jquery-div模拟下拉列表框(Select)插件

jquery-div模拟下拉列表框(Select)插件

关键词：Jquery div 模拟下拉列表框 select

最近要用到Select标签，但是数据比较多，使用默认的标签必须要下拉框超过一定高度，滚动条才出现，人为的设定下拉框的高度，并不能够达到想要的效果，尝试了一段时间，放弃了这个想法，决定找一个div模拟下拉框的插件，这样不仅能够达到想要的效果，其展示也会更漂亮。



从网络上找到了一个“jQuery Select(单选) 模拟插件 V1.3.6”，功能也比较强，应用到系统中，出了不

少问题，对这个插件进行了一些修改，但并没有达到理想效果，折腾了不少时间，终究还是决定自己写一个。这个功能较为简单，只是简单的模拟出下拉框。



实现比较简单，就是在页面上添加一个宿主input标签，用于存储数据并占位，之后使用div+ul+li模拟一个层，li模拟出排列的option，并对li的点击添加选中事件并处理数据，同时添加一些展示效果。当列表的数值大于8时，我设定了div的高度为150px，用此限定列表框的整体高度，并出现滚动条，这里的8（对应代码_count > 8）及150px我都写死了，可以通过修改该扩展将这两个值做成可配置的，将会更灵活，不过我从整体效果上看了看，高度150px用起来感觉刚好。代码如下：

$.fn.SimulateSelect = function(data, f) {
var inOb = $(this);
var currentid = $(this).attr("id");
var id = 'divSelect' + currentid;
var width = $(this).width();
$(this).hide();
$(this).parent().append('<div id="a_' + id + '"></div>' + '<div id="b_' + id + '"></div>');
$('#a_' + id).addClass("dropselectbox dropdown").css({
'width': width - 22
}).html('').html($(this).val());
$('#a_' + id).click(function(eb) {
$('#b_' + id).show();
try {
eb.stopPropagation();
}
catch (e) {
event.cancelBubble = true;
}
});
var changeleft = false;
// 这里只针对IE8,其他浏览器无此问题
if ($.browser.msie)
changeleft = ($.browser.version) >= 8;
if (changeleft) {
$('#b_' + id).addClass("ullist").css({
'width': width - 16,
'top': $('#a_' + id).offset().top + 22
}).hide();
} else {
$('#b_' + id).addClass("ullist").css({
'width': width - 16,
'top': $('#a_' + id).offset().top + 22,
'left': $('#a_' + id).offset().left
}).hide();
}
$('<ul style="margin:0;"></ul>').appendTo($('#b_' + id));
var _count = 0;
$.each(data.value, function(o, ov) {
_count++;
$("<li/>").html(ov).attr('v', ov).click(function(eb) {
$(inOb).val($(this).attr('v'));
$('#a_' + id).html('').html($(this).html());
$("#" + currentid).val($(this).html());
$('#b_' + id).hide()
if (f)
f($(this).attr('v'), $(this).html());
try {
eb.stopPropagation();
}
catch (e) {
event.cancelBubble = true;
}
}).hover(function() {
$('#b_' + id).find('li[class=floatred]').removeClass('floatred');
$(this).addClass('floatred');
$('#b_' + id).find('li').removeClass("over");
$(this).addClass("over").addClass("selectedli");
}, function() {
$(this).removeClass('floatred');
$(this).removeClass("over");
}).appendTo($('#b_' + id + ' ul'));
});
// 绑定初始值
if (data.select != "") {
$('#a_' + id).html('').html(data.select);
$("#" + currentid).val(data.select);
}
if (_count > 8) {
$('#b_' + id).find("ul").css("height", "150px");
}
var liobj = $('#b_' + id).find('li[v=' + inOb.val() + ']');
if (liobj.html()) {
liobj.addClass('floatred');
$('#a_' + id).html(liobj.html());
}
else {
inOb.val('');
}
$(document).click(function() {
$("#b_" + id).hide();
});
};

效果如下图：

使用方法：


1 在页面上声明一个input对象进行占位：


<input id="selFilter" type="text" style="width: 100px;" readonly="readonly" month="1" />


2 在页面载入时执行一下语句：




$(function() {
$("#selFilter").SimulateSelect({value:{1:"2008",2:"2007",3:"2006"},select:''})
});


css，其中还用到了一个小下拉图标，这个随便找一个就行了：


.ullist ul li{text-indent:5px; margin: 0;padding:0; list-style:none; display:block; cursor:default;}
.ul li.over{}
.dropselectbox {border:1px solid #ccc;overflow:hidden; display:inline;float:left; padding-left:4px; background-color:#fff;}
.dropdown {height:21px, font:12px/21px Arial, Helvetica, sans-serif; border:solid 1px #AAA; background:url(../image/arrow.gif) no-repeat right center;}
.dropdown .over{border-color:#369; background-image:url(../image/droparrowover.gif); }
.dropdown .current{ border-color:#003;}
.ullist ul {border:1px solid #aaa; backgruond:#fff; overflow-y :auto}
.ullist ul li{ background:#fff; height:19px; font:400 12px/19px Arial, Helvetica, sans-serif;}
.ullist ul li.over{background:#369; color:#fff;}
.ullist {background-color:#fff; position:absolute; overflow-y:auto; overflow-x: hidden; z-index: 20; margin: 0; padding:0;}