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 > {
        $('#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;}