jquery自定义下拉菜单
因工作需要自己写了个可填，可选，可自定义的日期下拉菜单...贴代码...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
? <head>
??? <title>select.html</title>
??? <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
??? <meta http-equiv="description" content="this is my page">
??? <meta http-equiv="content-type" content="text/html; charset=UTF-8">
???
??? <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" language="JavaScript">
$(document).ready(function(){
$(".select_button").click(function(){
? setDisAll();//先把显示的下拉菜单隐藏掉
? $(this).parent().addClass("zIndex"); //给父div加一个zIndex提高层的优先级
? $(this).parent().siblings().find("ul").slideUp("fast");//点击当前的下拉按钮时收起其它下拉
? $(this).parent().siblings().removeClass("zIndex");//取消其它下拉的层优先级让上面的层永远在最上层
? $(this).prev().slideDown("fast");
? return false;
? });
$(".myli").click(function(){
$(this).parent().parent().find(".selected").val($(this).find("a").html());//给下拉框赋值
$(".option-wrap").slideUp("fast",function(){
??? $(".select").removeClass("zIndex");
});
?? return false;
});
$(".myliz").click(function(){
if($(this).attr("className").indexOf("myliz_bg")<0)
{
$(this).parent().find(".myliz_no").removeClass("myliz_no").removeClass("myliz_bl").addClass("myliz_bl");
$(this).removeClass("myliz_bg").addClass("myliz_bg");
}else
{
$(this).parent().find(".myliz_bl").removeClass("myliz_no").removeClass("myliz_bl").addClass("myliz_no");
$(this).removeClass("myliz_bg");
}
return false;
});
$(".selected").click(function(){
? $(this).parent().addClass("zIndex"); //给父div加一个zIndex提高层的优先级
? $(this).parent().siblings().find("ul").slideUp("fast");//点击当前的下拉按钮时收起其它下拉
? $(this).parent().siblings().removeClass("zIndex");//取消其它下拉的层优先级让上面的层永远在最上层
? $(this).prev().slideDown("fast");
? return false;
});
$(".qd").click(function(){
var ary=$(this).parent().find('input[type="text"]');
var reg=/^(\d{4})-(\d{2})-(\d{2})$/;
var ero="";
if(ary[0].value=="")
{
ero="开始日期不能为空！";
$(this).parent().find(".ero").html(ero);
return false;
}
if(!isDate_yyyyMMdd(ary[0].value)){?
??? $(this).parent().find(".ero").html("请保证开始日期格式为yyyy-mm-dd或正确的日期!");?
??? return?? false;?
}
if(ary[1].value=="")
{
ero="截止日期不能为空！";
$(this).parent().find(".ero").html(ero);
return false;
}
if(!isDate_yyyyMMdd(ary[1].value)){?
??? $(this).parent().find(".ero").html("请保证截止日期格式为yyyy-mm-dd或正确的日期!");?
??? return?? false;?
}
$(this).parent().parent().parent().parent().find(".selected").val(ary[0].value+"至"+ary[1].value);
setDisAll();
});
$(".qx").click(function(){
setDisAll();
return false;
});
$(".disdate_bl").click(function(){
return false;
});
// $('input[type="text"]').val("123")
$("body").click(function(){//点击body任意位置收起下拉菜单
?? setDisAll();
?? return false;
});
function setDisAll()
{
$(".option-wrap").slideUp("fast",function(){
??? $(".select").removeClass("zIndex");
$(".myliz").removeClass("myliz_bg");
$(".myliz_bl").removeClass("myliz_bl").addClass("myliz_no");
$(".ero").html("");
? });
}
/**
* 判断是否为正确的日期格式。
* 日期格式为yyyy-MM-dd或者为yyyy/MM/dd。
*
* @param str 需要检查的日期字符串
* @return false : 传入的字符串不是正确日期格式
*???????????????? 例如：22dkdk
*????????????????????? 2010-2-29
*????????? true ：传入的字符串是正确日期格式
*???????????????? 例如：2010-2-28
*?????????????????????? 2010/2/28
*?????????????????????? 2010-07-28
*?????????????????????? 2010/7/28
*?????????????????????? 2012-02-29
*??????????????????????
*/
function isDate_yyyyMMdd(str) {
var reg = /^([0-9]{1,4})(-|\/)([0-9]{1,2})\2([0-9]{1,2})$/;
var r = str.match(reg);
if(r==null)return false;
var d= new Date(r[1], r[3]-1,r[4]);
var newstr=d.getFullYear()+r[2]+(d.getMonth()+1)+r[2]+d.getDate();
var yyyy = parseInt(r[1], 10);
var mm = parseInt(r[3], 10);
var dd = parseInt(r[4], 10);
var compstr = yyyy+r[2]+mm+r[2]+dd;
return newstr==compstr;
}
});
</script>
<style type="text/css">
<!--样式 -->
#selectDiv {padding-top:10px;}
.select {width:147px;height:18px;border:1px solid #aaaaaa;margin:0 auto;position:relative;background:#fff;margin-bottom:5px;}
a.select_button {display:block;background:#D3D3D3;width:23px;height:20px;position:absolute;right:-2px;top:-1px;text-align:center;text-decoration:none;}
a.select_button:active{background:#D3D3D3;}
a.select_button:hover{background-color:#ffa500}
.option-wrap {position:absolute;width:147px;margin:0;padding:0;top:18px;display:none;border:1px solid #ccc;left:-1px;background:#fff;}
.option-wrap li {list-style:none;}
.option-wrap a {display:block;height:20px;font:12px/20px "宋体";color:#333;padding-left:10px;text-decoration:none;}
.option-wrap a:hover {background:#ccc;color:#fff;}
.selected {font:12px/20px "宋体";color:#333;margin:0;padding-top:2px;height:16px;border:none;}
.zIndex {z-index:10000;}
.disdate_bl{
width:140px;
display:block;
margin-top:5px;
font:12px/20px "宋体";color:#333;padding-left:10px;
}
.myliz_no{
display:none;
}
.myliz_bl{
display:block;
}
.myliz_bg{
background:#D3D3D3;
}
.text{
width:100px;
height:18px;
}
.qd{
height:22px;
font:12px/20px "宋体";color:#333;padding-left:10px;
margin-top:5px;
text-align:center;
width:40px;
padding-left:3px;
padding-top:0px;
}
.qx{
height:22px;
font:12px/20px "宋体";color:#333;padding-left:10px;
margin-top:5px;
text-align:center;
width:40px;
padding-left:3px;
padding-top:0px;
}
.ero{
color:red;
}
</style>
? </head>
?
? <body>
??? <div id="selectDiv">
<div value="请选择..." id="xxx" />
<ul name="startTime" /><br />
到:<input type="text" name="endTime" />
<br />
<input type="button" value="确定" ><input type="button" value="取消" >
</div>
</li>
</ul>
<a href="javascript:void(0);">↓</a>
</div><!--select-->
</div>
<div id="selectDiv">
<div value="请选择..." id="xxx" />
<ul name="startTime" /><br />
到:<input type="text" name="endTime" />
<br />
<input type="button" value="确定" ><input type="button" value="取消" >
</div>
</li>
</ul>
<a href="javascript:void(0);">↓</a>
</div><!--select-->
</div>
<div id="selectDiv">
<div value="请选择..." id="xxx" />
<ul name="startTime" /><br />
到:<input type="text" name="endTime" />
<br />
<input type="button" value="确定" ><input type="button" value="取消" >
</div>
</li>
</ul>
<a href="javascript:void(0);">↓</a>
</div><!--select-->
</div>
<div id="selectDiv">
<div value="请选择..." id="xxx" />
<ul name="startTime" /><br />
到:<input type="text" name="endTime" />
<br />
<input type="button" value="确定" ><input type="button" value="取消" >
</div>
</li>
</ul>
<a href="javascript:void(0);">↓</a>
</div><!--select-->
</div>
? </body>
</html>
?
