jquery 选择时间（小时）区间（四）

尝试用插件的形式编写

源码

 <!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></title><script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script><script language="javascript">(function($) {$.fn.select_interval=function(setting){var default1={//默认设置
                     select_start_id:'',select_end_id:'',data_sourse:''};var set = $.extend({},default1,setting);//将字符串转化为jquery对象
                 set.select_start_id = (typeof set.select_start_id == 'string' ? $('#'+set.select_start_id) : set.select_start_id);set.select_end_id = (typeof set.select_end_id == 'string' ? $('#'+set.select_end_id) : set.select_end_id);var select_start = {init:function(){set.select_start_id.empty();set.select_start_id.append($('<option value="" selected>请选择</option>'));for(var i = 0; i <set.data_sourse.start.length;i++){$('<option></option>').text(set.data_sourse.start[i].text).val(set.data_sourse.start[i].value).appendTo(set.select_start_id);}},change:function(){var temp_select_start_value = set.select_start_id.val();var temp_select_end_value = set.select_end_id.val();select_end.init();if (''!= temp_select_start_value){var that = this;set.select_end_id.children().each(function(){if(that.judge(temp_select_start_value,this)) $(this).remove();});}set.select_end_id.val(temp_select_end_value);},judge:function(judge_value,opt){return (parseInt(judge_value)>=parseInt($(opt).val()))? true :false;}};var select_end = {init:function(){set.select_end_id.empty();set.select_end_id.append($('<option value="" selected>请选择</option>'));for(var i = 0; i <set.data_sourse.end.length;i++){$('<option></option>').text(set.data_sourse.end[i].text).val(set.data_sourse.end[i].value).appendTo(set.select_end_id);}},change:function(){var temp_select_start_value = set.select_start_id.val();var temp_select_end_value = set.select_end_id.val();select_start.init();if (''!= temp_select_end_value){var that = this;set.select_start_id.children().each(function(){if(that.judge(temp_select_end_value,this)) $(this).remove();});}set.select_start_id.val(temp_select_start_value);},judge:function(judge_value,opt){return (parseInt(judge_value) <= parseInt($(opt).val()))? true :false;}    };var statistics = function(){if(''==set.select_start_id.val()){alert('请选择开始的时间！！');set.select_start_id.focus();    return;}if(''==this.jq_hour_end_select.val()){alert('请选择结束的时间！！');this.jq_hour_end_select.focus();return;    }confirm(this.jq_hour_start_select.val()+'---'+this.jq_hour_end_select.val());    }//初始化设置
                 select_start.init();select_end.init();set.select_start_id.bind('change',function(){ select_start.change();});set.select_end_id.bind('change',function(){ select_end.change(); });};    })(jQuery);$(function(){var josn1 = {'start':[{'text':'星期一','value':1},{'text':'星期二','value':2},{'text':'星期三','value':3},{'text':'星期四','value':4},{'text':'星期五','value':5},{'text':'星期六','value':6},{'text':'星期日','value':7}],'end':[      {'text':'星期一','value':1},{'text':'星期二','value':2},{'text':'星期三','value':3},{'text':'星期四','value':4},{'text':'星期五','value':5},{'text':'星期六','value':6},{'text':'星期日','value':7}]};$.fn.select_interval({select_start_id:'hour_start_select',select_end_id:'hour_end_select',data_sourse:josn1    });    $('#statistics_btn').bind('click', function(){if(''==$('#hour_start_select').val()){alert('请选择开始的时间！！');$('#hour_start_select').focus();    return;}if(''==$('#hour_end_select').val()){alert('请选择结束的时间！！');$('#hour_end_select').focus();return;    }confirm($('#hour_start_select').val()+'---'+$('#hour_end_select').val());    });});</script>
</head>
<body><div id="mode_div">按天统计：<select id='hour_start_select'></select>至<select id="hour_end_select"></select>&nbsp;&nbsp;<button id="statistics_btn">统计</button></div>
</body>
</html>

演示

按天统计：至统计

转载于:https://www.cnblogs.com/shuaisam/archive/2012/05/21/2511387.html

jquery 选择时间（小时）区间（四）相关推荐

jquery 选择时间（小时）区间（二）
select hours interval 选择时间区间完成jquery 选择时间(小时)区间(一)中同样的功能源码 View Code <!DOCTYPE html PUBLIC &quo ...
jQuery框架学习第四天：使用jQuery操作元素的属性与样式
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
python根据excel时间表统计24小时各小时区间点的个数
1.首先使用excel中的HOUR()函数,将日期数据(年/月/日时:分:秒)转换为小时,表格命名为hour.xlsx: 2.使用python读取excel数据hour.xlsx,将小时列转换为列表 ...
jQuery杂项进阶（四）
文章目录一.$ 的替换二.使用JSONP实现跨域三.jQuery 杂项方法.实用工具.回调对象.延迟对象参考 ☆ 四.jQuery 自身属性参考 ☆ 五.jQuery 插件介绍和参考 ☆ jQu ...
jQuery 基础教程（四）之jQuery中的DOM操作
一.jQuery 中的 DOM 操作 (1)DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的接口, 使用该接口可以轻松地访问页面中所有的标准组 ...
[转帖]jQuery框架学习第四天：使用jQuery操作元素的属性与样式
一.摘要本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言通过前面几章我们已经能够完全控制jQuery包装集了, 无论是通 ...
jquery源码分析(四)——回调对象 Callbacks
借用百度百科来说明下回调函数: 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数.回调函数不是由该 ...
jquery 向上滚动【四】个人认为好一些，哈
 <html> <head> <title>滚动</title> <script type="te ...
Jquery调用webService的四种方法【转载】
本文转载自:http://space.itpub.net/221062/viewspace-580298 我总结几个关键点 1. 服务必须声明为ScriptService(否则会出现下面的问题) 2. ...

jquery 选择时间（小时）区间（四）

jquery 选择时间（小时）区间（四）相关推荐

最新文章

热门文章