jQuery模拟select小插件
(function ($) {
$.fn.extend({
jQSelect: function (options) {
return this.each(function (i, obj) {
var selectBoxId = this.id + '__jQSelect';
if (obj.style.display != 'none' && $(this).parents()[0].id.indexOf('__jQSelect') < 0) {
//获取select的宽度，设置新UI的宽度
var UIOpt = $.fn.SetOptions(options);
var tabindex = this.tabIndex || 0;
//套一个div层,id=selectBoxId,class=dropdown
$(this).before("<div class='dropdown' id=" + selectBoxId + " tabIndex=" + tabindex + "></div>").prependTo($("#" + selectBoxId));
//获取div的z-index
var selectZindex = $(this).css('z-index')
//获取select当前被选中项
, selectIndex = $('#' + selectBoxId + ' option').index($('#' + selectBoxId + ' option:selected')[0]);
//增加自定义的select
$('#' + selectBoxId).append('<a href="#" class="select select' + this.id + '" id="' + this.id + 'Select" style="width:' + UIOpt.selectWidth + 'px;"><em>' + UIOpt.defaultText + '</em><img src="opacity.png" alt="" /></a><div id="' + this.id + 'SelectOptions" class="options options' + this.id + '" style="width:' + UIOpt.selectUIWidth + 'px;left:' + UIOpt.selectUILeft + 'px;"></div>');
//隐藏原始的select元素
$('#' + selectBoxId + ' select').hide();
$('#' + selectBoxId)
.bind("focus", function () {
$.fn.clearSelectMenu(selectBoxId, selectZindex);
$('#' + selectBoxId + '>a').addClass("current");
})
.bind("blur", function () {
//alert("b");
$.fn.clearSelectMenu(selectBoxId, selectZindex);
return false;
})
.bind("click", function (e) {
if ($('#' + selectBoxId + ' div').css("display") == 'block') {
$.fn.clearSelectMenu(selectBoxId, selectZindex);
return false;
}
else {
$('#' + selectBoxId + '>a').addClass("current");
$('#' + selectBoxId + ' div').show();
var selectZindex = $(this).css('z-index');
if ($.browser.msie || $.browser.opera) { $('.dropdown').css({ 'position': 'relative', 'z-index': '0' }); }
$('#' + selectBoxId).css({ 'position': 'relative', 'z-index': '999' });
//添加弹出框内容
$.fn.setSelectValue(selectBoxId, UIOpt.optionNumber);
$('#' + selectBoxId + ' span').width(UIOpt.selectUIWidth / UIOpt.optionNumber);
//获取选中项
selectIndex = $('#' + selectBoxId + ' span').index($('.current')[0]);
$('#' + selectBoxId + ' span').click(function (e) {
selectIndex = $('#' + selectBoxId + ' span').index(this);
$.fn.keyDown(selectBoxId, selectIndex);
$('#' + selectBoxId + '>a em').empty().append($('#' + selectBoxId + ' option:selected').text());
$.fn.clearSelectMenu(selectBoxId, selectZindex);
e.stopPropagation();
e.cancelbubble = true;
});
};
e.stopPropagation();
})
}
else if ($(this).parents()[0].id.indexOf('__jQSelect') > 0) {
selectBoxId = $(this).parents()[0].id;
$.fn.setSelectValue(selectBoxId, UIOpt.optionNumber);
if (this.style.display != 'none') { $(this).hide(); }
}
})
},
SetOptions: function (options) {
//设置默认属性
var d = {//默认值
defaultText: "请选择",
selectWidth: "177", //下拉框的宽度
selectUIWidth: "490", //下拉框弹出框的宽度
selectUILeft: "0",
optionNumber: 7 //每行显示option的个数
};
for (var p in options) {
d[p] = options[p];
}
return d;
},
clearSelectMenu: function (selectBoxId, selectZindex) {
//清除弹出框内的内容
if (selectBoxId != undefined) {
selectZindex = selectZindex || 'auto';
$('#' + selectBoxId + '>a').removeClass("current");
$('#' + selectBoxId + ' div').empty().hide();
$('#' + selectBoxId).css({ 'z-index': selectZindex });
}
},
setSelectValue: function (sID, oN) {
//设置弹出框内的内容
var content = [];
$.each($('#' + sID + ' option'), function (i) {
content.push('<span id="' + sID + '_' + i + '" data="' + $(this).val() + '"><a href="#">' + $(this).text() + '</a></span>');
});
content = content.join('');
$('#' + sID + ' div').html(content);
var selectIndex = $('#' + sID + ' span.current').index();
if (selectIndex != -1) {
$('#' + sID + '>a em').html($('#' + sID + ' option:selected').text());
}
$('#' + sID + ' span').eq($('#' + sID + ' select')[0].selectedIndex).addClass("current");
},
keyDown: function (sID, selectIndex) {
var $obj = $('#' + sID + ' select');
$obj[0].selectedIndex = selectIndex;
$obj.change();
$('#' + sID + ' span:eq(' + selectIndex + ')').toggleClass("current");
$('#' + sID + '>a em').html($('#' + sID + ' option:selected').text());
}
});
})(jQuery);
音悦台注册用户里有一个日期的下拉框，真心觉得挺好看的。可扣它的css还真心的辛苦（可能自己水平差）。于是乎，搜遍全网，如何用jquery模拟select。找到一个最合适的插件，这里给出原作者的地址：
http://www.zhangjingwei.com/archives/category/fed/javascript-web-developer/
因为自己的功能相对比较简单 所以加了些修改，去掉了很多代码。
css参照音悦台
.dropdown { outline:none;display:inline-block;*display:inline;font-family: tahoma,simsun,'microsoft yahei',Helvetica,Arial,sans-serif;font-size: 12px;}
.dropdown img { border:0 none;}
.dropdown em { font-style:normal;}
.dropdown a { color:#333; text-decoration:none; -webkit-transition:all .3s ease-in;}
.dropdown a:hover { -webkit-transform:scale(1); color:#390; text-decoration:underline;}
.dropdown a.select {float:left;height:38px; overflow:hidden; background:url(bg.png) 0px 0px;margin:0 11px 0 0;cursor:pointer;text-decoration:none;}
.dropdown a.select em {float:left;line-height:38px;color:#333; font-size:14px;font-weight:700;padding:0 0 0 13px;}
.dropdown a.select img {float:right;width:35px;height:38px;background:url(bg.png) -242px 0px;}
.dropdown a.select:hover,
.dropdown a.select.current { background-position:0px -40px;}
.dropdown a.select:hover img,
.dropdown a.select.current img { background-position:-242px -40px;}
.dropdown .options {display: none; min-height:41px; position:absolute; top:40px; border :1px solid #bfbeb1; background:#fff; overflow:hidden; overflow-y:hidden; zoom:1;}
.dropdown .options div {overflow:hidden;zoom:1;margin:0 -1px 0 0;}
.dropdown .options span {width:70px;line-height:41px;float:left;background:#fff;text-align:center;}
.dropdown .options span a,
.dropdown .options span.noneNum a:hover,
.dropdown .options span.noneNum a {display:block;border-top:1px solid #d0d0d0;border-left:1px solid #e5e5e5;margin:-1px 0 0 -1px;position:relative;zoom:1;text-decoration:none;color:#333;font-weight:700;height:41px;overflow:hidden;background:#fff;}
.dropdown .options span a:hover,
.dropdown .options span.current a {background:#9c6;color:#fff;}
使用demo，因为我需要做的是日期控件
<!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>jQuery jQSelect(单选) 模拟插件</title>
<style type="text/css">
h2 {font:900 12px/1.6 Arial, Helvetica, sans-serif;}
</style>
<link href="Style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.jQSelect.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#year").jQSelect({
defaultText: "年",
selectWidth: "160",
selectUIWidth: "420",
selectUILeft: "0",
optionNumber: 7
});
$("#month").jQSelect({
defaultText: "月",
selectWidth: "112",
selectUIWidth: "420",
selectUILeft: "-179",
optionNumber: 4
});
$("#day").jQSelect({
defaultText: "日",
selectWidth: "112",
selectUIWidth: "420",
selectUILeft: "-310",
optionNumber: 7
});
$("#month").change(function () {
var d = new Date();
d.setMonth($(this).children("option:selected").val());
d.setDate(0);
var L = d.getDate();
$("#day").empty();
for (var i = 1; i <= L; i++) {
$("#day").append('<option value="' + i + '">' + i + '日</option>');
}
});
})
</script>
<style type="text/css">
</style>
</head>
<body>
<h1>jQuery Select(单选)</h1>
<div style="float:left;">
<h2>模拟示例</h2>
<form action="#" method="get" style="margin:10px;" id="test">
<select name="year" id="year" style="z-index:1">
<option value="2000">2000年</option>
<option value="1981">1999年</option>
<option value="1982">1998年</option>
<option value="1983">1997年</option>
<option value="1984">1996年</option>
<option value="1985">1995年</option>
<option value="1986">1994年</option>
<option value="1987">1993年</option>
<option value="1988">1992年</option>
<option value="1989">1991年</option>
<option value="1985">1990年</option>
<option value="1986">1989年</option>
<option value="1987">1988年</option>
<option value="1988">1987年</option>
<option value="1989">1986年</option>
<option value="1985">1985年</option>
<option value="1986">1984年</option>
<option value="1987">1983年</option>
<option value="1988">1982年</option>
<option value="1989">1981年</option>
<option value="1985">1980年</option>
<option value="1986">1979年</option>
<option value="1987">1978年</option>
<option value="1988">1977年</option>
<option value="1989">1976年</option>
<option value="1987">1975年</option>
<option value="1988">1974年</option>
<option value="1989">1973年</option>
</select>
<select name="month" id="month" style="z-index:2">
<option value="1">一月</option>
<option value="2">二月</option>
<option value="3">三月</option>
<option value="4">四月</option>
<option value="5">五月</option>
<option value="6">六月</option>
<option value="7">七月</option>
<option value="8">八月</option>
<option value="9">九月</option>
<option value="10">十月</option>
<option value="11">十一月</option>
<option value="12">十二月</option>
</select>
<select name="day" id="day" style="z-index:3">
</select>
<br /><br />
<div id="postform"></div>
</form>
</div>
</body>
</html>
两个小图片，这里真的有两张图片
还有很多问题没有解决，在ie和ff下blur事件没有用，下拉框弹出来后点击其他的就没办法收回去了。这个问题不知道该怎么解决。
