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
$.fn.quickChange = function(handler) {
return this.each(function() {
var self = this;
self.qcindex = self.selectedIndex;
var interval;
function handleChange() {
if (self.selectedIndex != self.qcindex) {
self.qcindex = self.selectedIndex;
handler.apply(self);
}
}
$(self).focus(function() {
interval = setInterval(handleChange, 100);
}).blur(function() { window.clearInterval(interval); })
.change(handleChange); //also wire the change event in case the interval technique isn't supported (chrome on android)
});
};
var date_choice_func = 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_element.append('<option value="day">'+day_name+' '+day+'</option>');
}
};
$("#event_month").quickChange(date_choice_func);
//$('#event_month').bind('change', date_choice_func);
//$('#event_month').bind('blur', date_choice_func);