原文见  http://zscomehuyue.iteye.com/blog/1110772


效果如下：

使用方法： 


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

   


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


$(function() {   
var a =  {1:"2008",2:"2007",3:"2006"};  
//这里遇到一点小问题，不能传参，解决方式是eval将串转为object
$("#selFilter").SimulateSelect({value:a, select:ch, item: 'wap'}); 
      }); 



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 {
background-color: whiteSmoke;
height: 30px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font:12px/21px Arial, Helvetica, sans-serif;
background: whiteSmoke url(../p_w_picpaths/icon/bot_arrow.png) no-repeat 70 center;
position:relative;
top: -6px;
margin-right: 10px;
font-size: 110%;
line-height: 30px;
}

.dropdown .over {
border-color: #369;
background-p_w_picpath: url(../p_w_picpaths/icon/bot_arrow.png);
}

.dropdown .current {
border-color: #003;
}

.ullist ul {
border: 1px solid #aaa;
backgruond: #fff;
overflow-y: auto;
}

.ullist ul li {
background: #fff;
height: 25px;
font: 400 12px/19px Arial, Helvetica, sans-serif;
}

.ullist ul li.over {
background-color: #555;
color: #fff;
}

.ullist {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #fff;
/* border: 1px solid #CCC; */
position: absolute;
overflow-y: auto;
overflow-x: hidden;
z-index: 20;
margin: 0;
padding: 0;
font-size: 12px;
box-shadow: 0 1px 1px rgba(100, 100, 100, 0.2);
}


js

$.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('
' + '
'); 
    $('#a_' + id).addClass("dropselectbox dropdown").css({ 
        'width': width - 10
    }).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 + 9, 
            'top': $('#a_' + id).offset().top + 34 
        }).hide(); 
    } else { 
        $('#b_' + id).addClass("ullist").css({ 
            'width': width + 9, 
            'top': $('#a_' + id).offset().top + 34, 
            'left': $('#a_' + id).offset().left 
        }).hide(); 
    } 
    $('
    ').appendTo($('#b_' + id)); 
        var _count = 0;
        $.each( eval("("+data.value+")"), function(o, ov) { 
            _count++; 
            $("
  • ").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"); 
            }, function() { 
                $(this).removeClass('floatred'); 
                $(this).removeClass("over"); 
            }).click(function(){
            $(this).addClass("selectedli"); 
           
            /* 跳转 */
             ....这里可以加入选中后页面跳转的动作
           
            }).appendTo($('#b_' + id + ' ul')); 
        }); 
        // 绑定初始值 
        if (data.select != "") { 
            $('#a_' + id).html('').html(data.select); 
            $("#" + currentid).val(data.select); 
        } 
        if (_count > 10 ) { 
            $('#b_' + id).find("ul").css("height", "500px"); 
        } 
        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(); 
        }); 
        
    }; 



    终于纠结完这个问题嘞 OYE\(^o^)/