jquery自定义下拉菜单 -

fangshengcai001

浏览: 1803 次
性别:
来自: 北京

最近访客更多访客>>

和平共处

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (2)

社区版块

存档分类

jquery自定义下拉菜单

jQuery JavaScript CSS HTML

因工作需要自己写了个可填，可选，可自定义的日期下拉菜单...贴代码...

<!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">

    
<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 class="select">
<input type="text" class="selected" value="请选择..." id="xxx" />
<ul class="option-wrap">
<li class="myli"><a href="#">今天</a></li>
<li class="myli"><a href="#">7天</a></li>
<li class="myli"><a href="#">最近30天</a></li>
<li class="myliz"><a href="#">自定义</a></li>
<li class="myliz_no">
<div class="disdate_bl">
<div class="ero"></div>
从:<input type="text" class="text" name="startTime" /><br />
到:<input type="text" class="text" name="endTime" />
<br />
<input type="button" class="qd" value="确定" ><input class="qx" type="button" value="取消" >
</div>
</li>
</ul>

<a class="select_button" href="javascript:void(0);">↓</a>
</div>
</div>

<div id="selectDiv">
<div class="select">
<input type="text" class="selected" value="请选择..." id="xxx" />
<ul class="option-wrap">
<li class="myli"><a href="#">今天</a></li>
<li class="myli"><a href="#">7天</a></li>
<li class="myli"><a href="#">最近30天</a></li>
<li class="myliz"><a href="#">自定义</a></li>
<li class="myliz_no">
<div class="disdate_bl">
<div class="ero"></div>
从:<input type="text" class="text" name="startTime" /><br />
到:<input type="text" class="text" name="endTime" />
<br />
<input type="button" class="qd" value="确定" ><input class="qx" type="button" value="取消" >
</div>
</li>
</ul>

<a class="select_button" href="javascript:void(0);">↓</a>
</div>
</div>

<div id="selectDiv">
<div class="select">
<input type="text" class="selected" value="请选择..." id="xxx" />
<ul class="option-wrap">
<li class="myli"><a href="#">今天</a></li>
<li class="myli"><a href="#">7天</a></li>
<li class="myli"><a href="#">最近30天</a></li>
<li class="myliz"><a href="#">自定义</a></li>
<li class="myliz_no">
<div class="disdate_bl">
<div class="ero"></div>
从:<input type="text" class="text" name="startTime" /><br />
到:<input type="text" class="text" name="endTime" />
<br />
<input type="button" class="qd" value="确定" ><input class="qx" type="button" value="取消" >
</div>
</li>
</ul>

<a class="select_button" href="javascript:void(0);">↓</a>
</div>
</div>

<div id="selectDiv">
<div class="select">
<input type="text" class="selected" value="请选择..." id="xxx" />
<ul class="option-wrap">
<li class="myli"><a href="#">今天</a></li>
<li class="myli"><a href="#">7天</a></li>
<li class="myli"><a href="#">最近30天</a></li>
<li class="myliz"><a href="#">自定义</a></li>
<li class="myliz_no">
<div class="disdate_bl">
<div class="ero"></div>
从:<input type="text" class="text" name="startTime" /><br />
到:<input type="text" class="text" name="endTime" />
<br />
<input type="button" class="qd" value="确定" ><input class="qx" type="button" value="取消" >
</div>
</li>
</ul>

<a class="select_button" href="javascript:void(0);">↓</a>
</div>
</div>
</body>
</html>

myjquery.rar (44.7 KB)
下载次数: 9

分享到：

我们不仅是程序员

2011-03-23 15:58
浏览 1108
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

li_3ck_02a_1118.pdf: li_3ck_02a_1118

基于MATLAB的牛顿迭代法实现: 基于MATLAB的牛顿迭代法实现

mellitz_3ck_01_0319.pdf: mellitz_3ck_01_0319

2025探索银行业人工智能驱动技术转型的投资回报率: 内容概要：文章阐述了银行采用人工智能(AI)技术替代传统系统的紧迫性和收益，讨论了通过构建现代化的数据和技术平台实现效率提升的方法，同时强调实施过程中确保数据质量和建立信任的重要性。文中提及，在金融行业中，若想优化业绩则必须拥抱AI带来的机遇，并为此进行经营模式的革新。根据Workday主办的研讨会内容，PwC金融服务风险与监管领导和Workday金融服务高层指出了大部分银行对AI认知不足的问题，强调AI在金融、人力资源以及IT等领域的广泛应用潜力及具体应用场景，如欺诈检测、技能映射和财务管理方面的作用。并且提到了AI部署过程中可能出现的技术与非技术难题及相应解决办法，鼓励金融机构及时投资建设新型基础设施，以保持竞争力。适用人群：银行及其他金融机构管理人员；金融科技领域的专业研究人员；对企业数字化和智能化转型感兴趣的商业分析师、投资者；从事信息技术咨询工作的顾问。使用场景及目标：本文可以帮助金融机构制定合理的技术发展战略规划，评估是否有必要推进AI技术转型，同时也为希望涉足银行科技项目的开发者提供了宝贵的市场洞察，帮助理解行业内普遍存在的困难与潜在的市场需求。此外，对于想要了解银行

matlab程序代码项目案例论文+程序基于在线优化的快速模型预测控制Fast model predicitive control with matlab interface.zip: matlab程序代码项目案例【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！有问题请及时沟通交流。 2、适用人群：计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途：项目具有较高的学习借鉴价值，不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行，或热爱钻研，亦可在此项目代码基础上进行修改添加，实现其他不同功能。欢迎下载！欢迎交流学习！不清楚的可以私信问我！

[AB PLC例程源码][MMS_043071]Phase Manager and a Scalable Batching Solution.zip: AB PLC例程代码项目案例【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！有问题请及时沟通交流。 2、适用人群：计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途：项目具有较高的学习借鉴价值，不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行，或热爱钻研，亦可在此项目代码基础上进行修改添加，实现其他不同功能。欢迎下载！欢迎交流学习！不清楚的可以私信问我！

[AB PLC例程源码][MMS_044386]1769-SM2 Compact I-O to DSI Module - Multi Drive Mode Operation - with.zip: AB PLC例程代码项目案例【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！有问题请及时沟通交流。 2、适用人群：计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途：项目具有较高的学习借鉴价值，不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行，或热爱钻研，亦可在此项目代码基础上进行修改添加，实现其他不同功能。欢迎下载！欢迎交流学习！不清楚的可以私信问我！

[AB PLC例程源码][MMS_041232]Monitor I-O Connections in Logix.zip: AB PLC例程代码项目案例【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！有问题请及时沟通交流。 2、适用人群：计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途：项目具有较高的学习借鉴价值，不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行，或热爱钻研，亦可在此项目代码基础上进行修改添加，实现其他不同功能。欢迎下载！欢迎交流学习！不清楚的可以私信问我！

chromedriver-linux64-136.0.7058.0.zip: chromedriver-linux64-136.0.7058.0.zip

[AB PLC例程源码][MMS_042504]Logix5000 interface to Atlas-Copco Tool Controller over EtherNet-IP.zip: AB PLC例程代码项目案例【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！有问题请及时沟通交流。 2、适用人群：计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途：项目具有较高的学习借鉴价值，不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行，或热爱钻研，亦可在此项目代码基础上进行修改添加，实现其他不同功能。欢迎下载！欢迎交流学习！不清楚的可以私信问我！

[AB PLC例程源码][MMS_042349]How to read-write data to-from a PLC using OPC in Visual Basic 6.zip: AB PLC例程代码项目案例【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！有问题请及时沟通交流。 2、适用人群：计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途：项目具有较高的学习借鉴价值，不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行，或热爱钻研，亦可在此项目代码基础上进行修改添加，实现其他不同功能。欢迎下载！欢迎交流学习！不清楚的可以私信问我！

电力工程领域中背压热电联产电厂的设计与参数计算: 内容概要：本文档介绍了背压热电联产(CHP)发电厂的详细设计步骤，涵盖确定各状态点的压力、温度、比焓以及质量流率的具体方法。主要内容围绕计算净电功率、燃料消耗及其效率展开，并提供了T-s图绘制的指南。针对每个组件（如蒸汽轮机、冷凝器、除氧器等），都列出了详细的效率假设和压力损失表，为实际工程应用提供了宝贵的参考资料和操作指导。同时，该作业任务要求学生从给定初始值中选择合适的操作条件进行系统模拟，并利用课程讲义和Moodle平台资料完成计算流程。适用人群：对能源转换和动力设备设计感兴趣的学生或者初涉该领域的工程师。使用场景及目标：旨在帮助学员深入了解并掌握背压热电联产装置的工作原理和技术指标计算的方法论，通过实践练习提高他们的问题解决能力。其他说明：文档强调了稳态运行假设的重要性，即物质平衡等于能量输入等于输出的原则，并鼓励参与者借助附录提供的典型操作参数图表来寻找解决问题的方向。此外，它还特别指出对于一些变量值求解可能需要迭代法来进行调整，直至获得稳定结果。提交的报告必须含有一份详细的T-s图和其他必要附件。

机器学习-市财政收入分析（含数据集）: 机器学习_市财政收入分析（含数据集）

[AB PLC例程源码][MMS_046989]KAT with Code Sequencer.zip: AB PLC例程代码项目案例【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！有问题请及时沟通交流。 2、适用人群：计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途：项目具有较高的学习借鉴价值，不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行，或热爱钻研，亦可在此项目代码基础上进行修改添加，实现其他不同功能。欢迎下载！欢迎交流学习！不清楚的可以私信问我！

tracy_3cd_01_0318.pdf: tracy_3cd_01_0318

lusted_3cd_01_0918.pdf: lusted_3cd_01_0918

基于51的自动分拣系统设计20250307: 题目：基于51的自动分拣系统设计主控：AT89C52 测距模块：超声波测距模块甲醛传感器（ADC0832+滑动变阻器模拟）粉尘传感器（PCF8591+滑动变阻器模拟）净化模块（继电器驱动蓝灯）排风模块（继电器驱动绿灯）电源电路（5V降压为3.3V供电）显示模块（LCD1602）声光报警按键（3个，切换阈值选择，阈值加减）检测物体：开关模拟电机驱动模块（继电器驱动直流电机转动）功能： 1.显示屏显示甲醛，粉尘浓度可以切换设置阈值。 2.通过甲醛传感器检测车间环境，大于阈值时声光报警并启动净化模块。 3.通过粉尘传感器检测车间环境，大于阈值时声光报警并启动排风模块。 4.采用超声波传感器进行物体超高监测异常（大于XX距离）时触发声光报警 5.检测到物体（开关闭合）直流电机转动（模拟传送带）

network-server: network_server

[AB PLC例程源码][MMS_046691]Integrated Architecture Foundations of Modular Programming.zip: AB PLC例程代码项目案例【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！有问题请及时沟通交流。 2、适用人群：计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途：项目具有较高的学习借鉴价值，不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行，或热爱钻研，亦可在此项目代码基础上进行修改添加，实现其他不同功能。欢迎下载！欢迎交流学习！不清楚的可以私信问我！

sun_01_0308.pdf: sun_01_0308

最近访客 更多访客>>