JSFiddle - React, Tailwind, and code Playground
HTML
<select name="event_month" id="event_month">
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select name="event_day" id="event_day">
<!-- this will be filled by Javascript once the month is selected -->
</select>
JavaScript
$('#event_month').bind('change', function() {
// For this test we'll stick with 2012
var selected_year = '2012';
// This is the month the user just selected
var selected_month = $('#event_month').val();
// Find out how many days in selected month
var days_in_month = new Date(selected_year, selected_month, 0).getDate();
// This is our days <select> element, which we'll fill with <option> for the month
var select_element = $('#event_day');
// Just an array with the days in our desired language
var days_of_week = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sun"];
// Clear the element of the last selected month's values
select_element.empty();
// For each day in this month...
for (var day=1; day<=days_in_month; day++) {
// ...get the day's name...
var day_name = days_of_week[new Date(selected_year, selected_month-1, day).getDay()];
// ...add the name and number in an <option> element
select_object.append('<option value="'+day+'">'+day_name+' '+day+'</option>');
}
});