基于jQuery下拉两级联动select
来源:互联网 发布:mysql 5.7.17.tar.gz 编辑:程序博客网 时间:2024/05/23 01:18
之前参照那篇博客弄的忘记了,记录下:
js代码:
$(function() {
$.ms_DatePicker({
YearSelector : ".sel_year",
MonthSelector : ".sel_month",
DaySelector : ".sel_day"
});
$.ms_DatePicker();
});
(function($) {
$.extend({
ms_DatePicker : function(options) {
var defaults = {
YearSelector : "#sel_year",
MonthSelector : "#sel_month",
DaySelector : "#sel_day",
FirstText : "--",
FirstValue : 0
};
var opts = $.extend({}, defaults, options);
var $YearSelector = $(opts.YearSelector);
var $MonthSelector = $(opts.MonthSelector);
var $DaySelector = $(opts.DaySelector);
var FirstText = opts.FirstText;
var FirstValue = opts.FirstValue;
// 初始化
var str = "<option value=\"" + FirstValue + "\">" + FirstText
+ "</option>";
$YearSelector.html(str);
$MonthSelector.html(str);
$DaySelector.html(str);
// 年份列表
var yearNow = new Date().getFullYear();
var yearSel = $YearSelector.attr("rel");
for (var i = yearNow; i >= 1900; i--) {
var sed = yearSel == i ? "selected" : "";
var yearStr = "<option value=\"" + i + "\" " + sed + ">" + i
+ "</option>";
$YearSelector.append(yearStr);
}
// 月份列表
var monthSel = $MonthSelector.attr("rel");
for (var i = 1; i <= 12; i++) {
var sed = monthSel == i ? "selected" : "";
var monthStr = "<option value=\"" + i + "\" " + sed + ">" + i
+ "</option>";
$MonthSelector.append(monthStr);
}
// 日列表(仅当选择了年月)
function BuildDay() {
if ($YearSelector.val() == 0 || $MonthSelector.val() == 0) {
// 未选择年份或者月份
$DaySelector.html(str);
} else {
$DaySelector.html(str);
var year = parseInt($YearSelector.val());
var month = parseInt($MonthSelector.val());
var dayCount = 0;
switch (month) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
dayCount = 31;
break;
case 4:
case 6:
case 9:
case 11:
dayCount = 30;
break;
case 2:
dayCount = 28;
if ((year % 4 == 0) && (year % 100 != 0)
|| (year % 400 == 0)) {
dayCount = 29;
}
break;
default:
break;
}
var daySel = $DaySelector.attr("rel");
for (var i = 1; i <= dayCount; i++) {
var sed = daySel == i ? "selected" : "";
var dayStr = "<option value=\"" + i + "\" " + sed + ">"
+ i + "</option>";
$DaySelector.append(dayStr);
}
}
}
$MonthSelector.change(function() {
BuildDay();
});
$YearSelector.change(function() {
BuildDay();
});
if ($DaySelector.attr("rel") != "") {
BuildDay();
}
} // End ms_DatePicker
});
})(jQuery);
html代码
<select style="width: 60px" name="birth_year" id="sel_year" rel="1987"></select> 年
<select style="width: 50px" name="birth_month" id="sel_month"></select> 月
<!-- <select style="width: 50px" id="sel_day"></select> 日 -->
或者:
<select style="width: 60px" name="grad_year" class="sel_year" rel="1987"></select> 年
<select style="width: 50px" name="grad_month" class="sel_month"></select> 月
(若需加载多个选择框,如入学时间,毕业时间,就业时间等,可使用class=“xxx”)
- 基于jQuery下拉两级联动select
- Jquery ajax 实现两级下拉菜单联动
- jquery+php实现select联动效果(两级联动)
- 两级联动下拉菜单
- angularJs select两级联动
- jquery+json两级联动下拉菜单的实现
- jquery省份两级联动
- 基于JQuery的Select下拉框下拉框联动(级联)
- jquery填充select下拉列表,三级联动
- JQuery实现省市两级联动
- 关于js的冒泡事件,和一款基于jQuery的联动Select下拉框
- 【JQuery】使用JQuery实现城市两级或三级联动(下拉菜单)
- ASP.NET两级联动下拉框
- js+php+DB 下拉菜单两级联动
- ajax两级联动下拉框(js)
- 基于MVC3下拉列表联动(JQuery)
- 基于jquery的联动下拉框组件
- Jquery实现两级下拉框
- android L SystemProperties属性解析
- Codeforces Round #271 (Div. 2) E. Pillars(线段树优化DP)
- 图形处理(八)点云重建(上)点云滤波、尖锐特征边增采样、移除离群点
- React Native 入门环境搭建
- Android程序混淆代码
- 基于jQuery下拉两级联动select
- Mysql中创建根据第二个自增的id
- OCruntime交换方法用在处理iOS版本跨度问题的解决
- 图形处理(九)点云重建(下)法矢求取、有向距离场等值面提取
- HashMap的工作原理总结
- 自定义鼠标修改窗口大小
- RecyclerView的使用
- 图形处理(十)测地极坐标参数化
- 精华阅读第 5 期 | 移动开发精英俱乐部