Change a dropdown depending on another dropdown
- by Eric Evans
I'm trying to create a three select dropdowns that represent a persons birthday. I'm taking into consideration that there are 4 months with 30 days, 7 with 31 ,and 1 with 28 or 29 depending if it's a leap year or not. I would like the days dropdown to show the number of days depending on which month is chosen in the month dropdown. Here's what I have now.
Here's the html for the select
<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Birthday validation</title>
<script src="jquery-1.11.1.min.js"></script>
<script src="birthday_drop.js"></script>
<link href="style.css" rel="stylesheet />
</head>
<body>
<h2>Birthday</h2>
<fieldset class="birthday-picker">
<select class="birth-month" name="birth[month]"><option>Month</option></select>
<select class="birth-day" name="birth[day]"><option>Day</option></select>
<select class="birth-year" name="birth[year]"><option>Year</option></select>
</fieldset>
</body>
</html>
Here's the jquery that populates the dropdowns and my attempt to use the change function
/**
* Created by Eric Evans on 8/19/14.
*/
$(document).ready(function(){
var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
for(i=0; i < months.length; i++){
$("<option value=' + months[i] + '>" + months[i] + "</option>").appendTo('.birth-month');
}
for(i=0; i <= 31; i++){
$("<option value=' + i + '>" + i + "</option>").appendTo('.birth-day');
}
var myYear = new Date().getFullYear();
for(i=myYear; i >= 1950; i--){
$("<option value=' + i + '>" + i + "</option>").appendTo('.birth-year');
}
$('.birth-month').change(function(){
if($(this).val() == 'April'){
for(i=0; i <= 30; i++){
$("<option value=' + i + '>" + i + "</option>").appendTo('.birth-day');
}
}
});
});
Any help would be greatly appreciated
