用插件的形式编写升级版 jquery_select

/* * select_interval 0.1 * Copyright (c) 2012 shuaisam  http://shuaisam.cnblogs.com/* Date: 2012-06-04 * Desc: 提供时间的选择区间，用josn数据初始化*       select_start_id  开始时间的id*       select_end_id   结束时间的id*       data_sourse    josn数据源  格式如var josn1 = {'start':[ ],'end':[ ]};*       select_start_judge 选中的开始时间与结束时间选项比较函数*       select_end_judge        选中的结束时间与开始时间选项比较函数*/(function($) {$.fn.select_interval=function(setting){var default1={//默认设置select_start_id:'',select_end_id:'',data_sourse:'',select_start_judge:function(select_start_value,select_end_opt_value){return false;},select_end_judge:function(select_end_value,select_start_opt_value){return false;}};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();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){set.select_end_id.children().each(function(){if(set.select_start_judge(temp_select_start_value,$(this).val())) $(this).remove();});}set.select_end_id.val(temp_select_end_value);}};var select_end = {init:function(){set.select_end_id.empty();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){set.select_start_id.children().each(function(){if(set.select_end_judge(temp_select_end_value,$(this).val())) $(this).remove();});}set.select_start_id.val(temp_select_start_value);}};//初始化设置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);

<!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 src="../scripts/jquery_select_interval.js" type="text/javascript"></script><script language="javascript">$(function(){var josn1 = {'start':[    {'text':'--请选择--','value':''},{'text':'星期一','value':1},{'text':'星期二','value':2},{'text':'星期三','value':3},{'text':'星期四','value':4},{'text':'星期五','value':5},{'text':'星期六','value':6},{'text':'星期日','value':7}],'end':[      {'text':'--请选择--','value':''},{'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,select_start_judge:function(select_start_value,select_end_opt_value){return (parseInt(select_start_value)>=parseInt(select_end_opt_value))? true :false;},select_end_judge:function(select_end_value,select_start_opt_value){return (parseInt(select_end_value) <= parseInt(select_start_opt_value))? true :false;}    });    $('#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><style type='text/css'>body{background:#CFDFEF;font:12px/150% "Lucida Grande", Arial, Verdana, Helvetica, sans-serif;}div{font-size:12px    }div span{color:#6D93AB;font-size:14px;}.select{color:#79A2BD;}</style>
</head>
<body><div id="mode_div"><span >按天统计：</span><select id='hour_start_select' class='select'></select>至<select id="hour_end_select" class='select'></select><button id="statistics_btn">统计</button></div>
</body>
</html>

转载于:https://www.cnblogs.com/fyy-888/p/5158570.html

用插件的形式编写升级版 jquery_select_interval.js 源码相关推荐

html全屏背景视频特效,HTML5全屏背景视频特效插件Vidage.js源码
下面我们对HTML5全屏背景视频特效插件Vidage.js源码文件阐述相关使用资料和HTML5全屏背景视频特效插件Vidage.js源码文件的更新信息. HTML5全屏背景视频特效插件Vidage.j ...
three.js 源码注释（一）./Three.js
商域无疆 (http://blog.csdn.net/omni360/) 本文遵循"署名-非商业用途-保持一致"创作公用协议转载请保留此句:商域无疆 - 本博客专注于敏捷开发 ...
【笔记-vue】《imooc-vue.js高仿饿了么》、《imooc-vue 音乐app》、《imooc-vue.js源码全方位解析》
20170709 - 20171128:<imooc-vue.js高仿饿了么> 一.第一章课程简介 1-1课程简介 1.需求分析-脚手架工具-数据mock-架构设计-代码编写-自测-编译 ...
underscore.js源码研究(5)
概述很早就想研究underscore源码了,虽然underscore.js这个库有些过时了,但是我还是想学习一下库的架构,函数式编程以及常用方法的编写这些方面的内容,又恰好没什么其它要研究的了,所以 ...
Vue.js 源码目录设计
Vue.js 源码目录设计 Vue.js 的源码都在 src 目录下,其目录结构如下. src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # ...
video.js 源码解析
为什么80%的码农都做不了架构师?>>> 写在前面现在视频业务越来越流行了,播放器也比较多,作为前端工程师如何打造一个属于自己的播放器呢?最快最有效的方式是基于开源播放器深度 ...
MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法
说在前有时,我们在使用一个插件时,在网上即找不到它的相关API,这时,我们会很抓狂的,与其抓狂,还不如踏下心来,分析一下它的源码,事实上,对于JS这种开发语言来说,它开发的插件的使用方法都在它的源码 ...
js怎么调用wasm_Long.js源码解析
基于现在市面上到处都是 Vue/React 之类的源码分析文章实在是太多了.(虽然我也写过 Vite的源码解析所以这次来写点不一样的.由于微信这边用的是 protobuf 来进行 rpc 调用.所以 ...
【Vue.js源码解析一】-- 响应式原理
前言笔记来源:拉勾教育大前端高薪训练营阅读建议:建议通过左侧导航栏进行阅读课程目标 Vue.js 的静态成员和实例成员初始化过程首次渲染的过程数据响应式原理 – 最核心的特性之一准备工作 ...

用插件的形式编写升级版 jquery_select_interval.js 源码

用插件的形式编写升级版 jquery_select_interval.js 源码相关推荐

最新文章

热门文章