这篇文章主要介绍了 js 实现的日期联动效果,调试需加入 jquery 文件, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
调试需加入 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">
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script src="jquery.js">
- </script>
- <script>
- $(function() {
- $('#year').change(function() {
- if (ifLeapYear($(this).val())) {
- if ($('#month').val() == 2 && $('#day').children().length == 29) {
- $('#day').append('<option value="29">29</option>');
- }
- } else {
- if ($('#month').val() == 2 && $('#day').children().length == 30) {
- $('#day :last-child').remove();
- }
- }
- });
- $('#month').change(function() {
- var thisValue = $(this).val();
- var dayValue = $('#day').val();
- var month1 = ['4', '6', '9', '11'];
- $('#day').html('<option value="">-请选择-</option>');
- var day = '';
- if (thisValue == '') {
- return false;
- }
- if ($.inArray(thisValue, month1) != -1) {
- day = setDay(30);
- $('#day').append(day);
- } else if ($(this).val() == '2') {
- if ($('#year').val() != '' && ifLeapYear($('#year').val())) {
- day = setDay(29);
- } else {
- day = setDay(28);
- }
- $('#day').append(day);
- } else {
- day = setDay(31);
- $('#day').append(day);
- }
- $('#day').find('option[value=' + dayValue + ']').attr('selected', true);
- });
- }) function setDay(day) {
- var dayInfo = '';
- for (var i = 1; i <= day; i++) {
- dayInfo += '<option value="' + i + '">' + i + '</option>';
- }
- return dayInfo;
- }
- function ifLeapYear(year) {
- if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
- return true;
- } else {
- return false;
- }
- }
- </script>
- <select id="year">
- <option value="">
- -请选择-
- </option>
- <?php for ($i=1980;$i<2012;$i++){ ?>
- <option value="<?php echo $i ?>">
- <?php echo $i ?>
- </option>
- <?php } ?>
- </select>
- 年
- <select id="month">
- <option value="">
- -请选择-
- </option>
- <?php for ($i=1;$i<=12;$i++){ ?>
- <option value="<?php echo $i ?>">
- <?php echo $i ?>
- </option>
- <?php } ?>
- </select>
- 月
- <select id="day">
- <option value="">
- -请选择-
- </option>
- </select>
- 日
来源: