原文見 http://zscomehuyue.iteye.com/blog/1110772
效果如下：
使用方法：
1 在頁面上聲明一個input對象進行佔位：
<input id="selFilter" type="text" style="width: 100px;" readonly="readonly" month="1" />
2 在頁面載入時執行一下語句：
$(function() {
1 在頁面上聲明一個input對象進行佔位：
<input id="selFilter" type="text" style="width: 100px;" readonly="readonly" month="1" />
2 在頁面載入時執行一下語句：
$(function() {
var a = {1:"2008",2:"2007",3:"2006"};
//這裏遇到一點小問題，不能傳參，解決方式是eval將串轉爲object
$("#selFilter").SimulateSelect({value:a, select:ch, item: 'wap'});
});
css，其中還用到了一個小下拉圖標，這個隨便找一個就行了：
});
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('<div id="a_' + id + '"></div>' + '<div id="b_' + id + '"></div>');
$('#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();
}
$('<ul style="margin:0;padding:0;"></ul>').appendTo($('#b_' + id));
var _count = 0;
$.each(eval("("+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");
}, 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^)/