js日期联动示例

  调试需加入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>日