基于JQuery的日期联动实现代码

实现目标:

两个日期,有下拉框:


复制代码 代码如下:

<head>
//导入jquery地址
<script src="(Jquery地址)" language="JavaScript" type="text/javascript"></script>
<script type="text/javascript">
//startYear发生变化
function changeYear(str,isstart)
{
var pre = "start";
if(isstart == false)
{
pre = "end";
}
var startMonth = $(pre + "Month").value;
if(startMonth == "")
{
var e = $(pre + "Month");
optionClear(e);
return;
}
var n = MonHead[startMonth - 1];
if(startMonth == 2 && IsPinYear($(pre + "Year").value))
{
n++;
}
writeDay(n,pre);
}
function changeMonth(str,isstart)
{
var pre = "start";
if(isstart == false)
{
pre = "end";
}
var year = $(pre + "Year").value;
if(year == "")
{
var e = $(pre + "Day");
optionClear(e);
return;
}
var n = MonHead[str - 1];
if(str == 2 && IsPinYear($(pre + "Year")))
{
n++;
}
writeDay(n,pre);
}
function dateStart()
{
var defaultStartY = "2011";
var defaultStartM = "1";
var defaultStartD = "14";
var defaultEndY = "2011";
var defaultEndM = "2";
var defaultEndD = "23";
MonHead = [31,28,31,30,31,30,31,31,30,31,30,31];
var prestr = new Array("start","end");
for(var j=0; j<2; j++)
{
var pre = prestr[j];
//start 年
var y = new Date().getFullYear();
if(pre == "start")
{
//start初始选中前第10天
var i_index = 0;
for(var i=(y-10); i<=y; i++)
{
$(pre+"Year").options.add(new Option(""+i+"",i));
if(i == defaultStartY)
{
$(pre+"Year").options[i_index].selected = true;
}
i_index++;
}
}
else
{
var i_index =0;
for(var i=(y-5); i<=y+5; i++)
{
$(pre+"Year").options.add(new Option(""+i+"",i));
if(i == defaultEndY)
{
$(pre+"Year").options[i_index].selected = true;
}
i_index++;
}
}
//start月
defaultM = (pre == "start" ? defaultStartM : defaultEndM)
for(var i = 1; i < 13; i++)
{
$(pre + "Month").options.add(new Option(""+i+"",i));
if(i == defaultM)
{
$(pre + "Month").options[i-1].selected = true;
}
}
//start日
var n = MonHead[$(pre + "Month").value];
if(new Date().getMonth == 1 && IsPinYear($(pre + "Year").value))
{
n++;
}
defaultD = (pre == "start" ? defaultStartD : defaultEndD)
writeDay(n,pre);
$(pre + "Day").options[defaultD-1].selected = true;
}
}
function writeDay(n,pre)
{
var e = $(pre + "Day");
optionClear(e);
for (var i=1; i<(n+1); i++)
{
e.options.add(new Option(""+i+"",i));
}
}
function IsPinYear(year)
{
return (0 == year%4 && (year%100 != 0 || year % 4 == 0));
}
function optionClear(e)
{
for(var i=e.options.length; i>=0; i--)
{
e.remove(i);
}
}
</script>
</head>
<body onload="dateStart()">
<p name="selectdate">

<select id="startYear" name="startYear" onchange="changeYear(this.value,true)">
</select>

<select id="startMonth" name="startMonth" onchange="changeMonth(this.value,true)">
</select>

<select id="startDay" name="startDay">
</select>


<select id="endYear" name="endYear" onchange="changeYear(this.value,false)">
</select>

<select id="endMonth" name="endMonth" onchange="changeMonth(this.value,false)">
</select>

<select id="endDay" name="endDay">
</select>

</p>
</body>

参考了一些代码,希望对需要的朋友有所帮助。

时间: 2011-02-23

jQuery制作简洁的多级联动Select下拉框

今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这个Select下拉框也可以绑定下拉事件,并获取当前选中项的值. html代码: 复制代码 代码如下: <div class="wrap">         <div class="nice-select" name="nice-select&

jQuery 联动日历实现代码

来看下效果图 一.先来说下功能: 1.点击"确定"显示日历 2.再次点击隐藏,或从DOM中删除这个日历.如些反复第一,和第二这两步. 3.让日历中显示当前月份日期(多少天,每天是多少号). 4.让当前月份的日期和星期几对应. 5.让左边两边的日历关联起来. 二.再来说下HTML结构. 1.上面蓝色的是一个DIV,显示当前月分,和上月,下月. 2.下面的日期和星期,是用一个table结构存放数据.星期用thead,日期用:tbody存放. 三.功能展开分析: 3.1.前两个功能? 让我想

jQuery 下拉列表 二级联动插件分享

jQuery二级联动插件:jQuery.selected 一个页面可以引用多个联动效果,使用方法: 配置js: 复制代码 代码如下: var defaults = { NextSelId: '#Select2', SelTextId: '#Text1', Separator: '--', SelStrSet: [ { name: '请选择', subname: '请选择'}, { name: '★高起本★', subname: '计算机科学与技术|汉语言文学' }, { name: '★高起专★

简单实用jquery版三级联动select示例

html和js部分 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=gbk /> <title>selectList</title> <style type="text/css"> *{margin:0;padding:0;} .selectList{width:200px;margin:50px auto;} </style>

基于JQUERY的多级联动代码

jquery.select.more.js 复制代码 代码如下: (function($){ $.fn.doselectmore = function(settings) { var dfop ={ namekey: "name", pnamekey: "name", idkey: "id", selectname:"sel", method: "POST", datatype: "json&qu

jQuery实现日期联动效果实例

本文实例讲述了jQuery实现日期联动效果的方法.分享给大家供大家参考,具体如下: 实现目标: 两个日期,有下拉框: <head> //导入jquery地址 <script src="jquery-1.7.2.min.js" language="JavaScript" type="text/javascript"></script> <script type="text/javascript&q

JQuery打造省市下拉框联动效果

做联动效果,若是用纯JavaScript来做,往往需要辅助页面保存需要刷新的结果集,然后渲染到原页面.考虑将需要动态刷新的内容自动拼接到前一个下拉框之后,当前一个下拉框onchange后,同级的后面的下拉框全部清除,然后重新拼接刷新的内容.用JQuery实现比较容易,代码以省市联动效果为例实现. JSP页面代码如下: 复制代码 代码如下: <li id="base"> <p>生源地:</p> <label> <select id=&

jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态

功能:省,市,地区三级联动,采用jquery ajax 取数据绑定,页面刷新或提交后选定值能保存并保持选中状态 把以下代码放在一个单独的js文件中,在页面上引用即可调用 复制代码 代码如下: //获取cookie值function readCookie(name) {    var cookieValue = "";    var search = name + "=";    if (document.cookie.length > 0) {       

jquery select操作的日期联动实现代码

Jquery的选择器很强大,对select的options对象添加的时候我找了老半天才找到 复制代码 代码如下: /**//* 文件名:jquery.liu.select.js 功能说明:本js文件为jquery类库的一个插件,主要实现对select的操作. 作者:John Liu 编写日期:2008/03/12 */ //得到select项的个数 jQuery.fn.size = function() { return jQuery(this).get(0).options.length; }

jquery+json 通用三级联动下拉列表

Author: shaoyun Email: shaoyun (at) yeah.net Date: 2010-03-10 02:03 Blog: http://shaoyun.cnblogs.com/ 用Jquery实现,原始代码只支持IE,这里我改了一下,我的代码里面有三个版本的实现 第一个是通过读取XML构建,支持IE/firefox,chrome不支持,有兴趣的可以将读取XML的部分改成AJAX的方式,这样chrome支持就不成问题 第二个是采用Json数据格式构建,是我的第二次尝试改进

Jquery实现无刷新DropDownList联动实现代码

先看HTML,我们引用Jquery,放两个DropDownList: 复制代码 代码如下: <style type="text/css"> #ddlEmployeeCars { display:none; position:absolute; top:50px; left:9px; } </style> <script language="javascript" type="text/javascript" src=

用Jquery实现多级下拉框无刷新的联动

最开始准备用.NET只带的AJAX实现,发现达不到想要的效果.后来采取JQuery中AJAX功能,通过异步调用C#写的web服务实现. load()方法可以说是JQuery中最简单的AJAX方法,它用于获取目标服务器的响应并将结果显示到页面上.load方法就是Jquery对AJAX的包装.还可以使用$.post()和$.get()来实现post或get方式的AJAX调用,对于复杂的情况,还可以使用AJAX()方法.

jquery 实现二级/三级/多级联动菜单的思路及代码

本文介绍使用jQuery的AJAX功能和asp.net来实现省市区的三级联动效果,其他二级.三级或多级联动也可以按照此方法完成. 文章中涉及到的数据表为City,为方便管理. 设计此表如下 ID:自增长字段 City_Name:城市名称 City_Code:城市代码 我们根据城市代码来查询省.市.区.城市代码结构大致如下: 内蒙古:150000,呼和浩特:150100,新城区:150101. 其他地区代码与此一样,省级为省级编号+0000,市级为省级编号+市级编号+00,地区为省级编号+市级编号

jQuery插件实现多级联动菜单效果

开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后想用的时候就方便多了.项目中每个页面都有引用jQuery,,开发个jQuery联动菜单插件,说动手就动手,下面跟大家分享分享. 我用的jQuery插件方式 (function($){ $.fn.casmenu=function(argvs){ //your code } })(jQuery); 其中jQuery传入的是jquery对象,需

jquery实现二级导航下拉菜单效果

下拉菜单实现很简单,纯css也能实现,但是我不擅长,用jquery也就两行代码,于是就用jquery+css实现简单二级下拉菜单导航,分享给大家供大家参考,具体内容如下 运行效果图: 具体代码: 第一步:确定导航的html格式 <ul id="nav"> <li><a href="#">首页</a> <ul> <li><a href="#">PHP编程</a

jQuery Ajax实现Select多级关联动态绑定数据的实例代码

jQuery选择插件分为基本版和美化版,重点说下美化版,如下图所示: 相比最原始的版本,美化后的选择插件可以说是很漂亮了且功能更加强大(这里不说了,自行发掘吧).这里主要是添加了它的特有属性并调用 class="chzn-select": jsp页面: <select class="chzn-select" id="CODE" name="CODE"> ...... </select> js页面: $(

jquery实现二级导航下拉菜单效果实例

大家都知道jQuery是一个框架,它对JS进行了封装,使其更方便使用.前面两篇博文分别是用CSS样式和JS实现的,那么这篇就用jQuery来实现二级下拉式菜单. 使用JQuery实现需要用到的知识有: 1)使用$(function(){...})获取到想要作用的HTML元素. 2)通过使用children()方法寻找子元素. 3)通过使用show()方法来显示HTML元素. 4)通过使用hide()方法来隐藏HTML元素. 5)jQuery库引用方法: 第一种方法:将jQuery库下载到电脑上,

用prototype实现的简单小巧的多级联动菜单

使用prototype.js这个js库,这个在网上一搜就能找到了,是一个开源的js函数库.  看到今天贴了几个联动菜单的帖子 这个应该大家都有各自比较好的代码了 我也顺手贴一个我们team里面用的比较小巧的代码 // author: downpour    var DoubleCombo = Class.create();    DoubleCombo.prototype = {      initialize: function(source, target, ignore, url, opt

三级下拉菜单的js实现代码

三级下拉菜单的实现: 复制代码 代码如下: function list(idstr){ var name1="subtree"+idstr; var name2="img"+idstr; var objectobj=document.all(name1); var imgobj=document.all(name2); //alert(imgobj); if(objectobj.style.display=="none"){ for(i=1;i&

Ajax二级联动菜单实现原理及代码

index.jsp: 复制代码 代码如下: <%@ page language="java" pageEncoding="UTF-8"%> <html> <head> <title>二级菜单联动演示</title> <script type="text/javascript"> var req; window.onload=function() {//页面加载时的函数 } f

超简单JS二级、多级联动的简单实例

超简单的JS联动代码,不过要配合jquery用,也可以自己修改为不用任选JS库的代码 复制代码 代码如下: <tr>  <th>一级分类</th><td>    <select name="subsidiary_cat_id" class="subsidiary_cat_id" onchange="linkage('.subsidiary_cat_id','.cat_id');">