JSFiddle - React, Tailwind, and code Playground
HTML
<select name="month1" id="month1" size="1">
<option value="">Choose a Month</option>
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<select name="month2" id="month2" size="1">
<option value="">Choose an Option</option>
<option value="2">2</option>
<option value="14">14</option>
</select>
<select name="month3" id="month3" size="1">
<option value="">Choose an Option</option>
<option value="3">3</option>
<option value="15">15</option>
</select>
JavaScript
(function() {
var monthsToGo;
$(document).ready(function() {
$('#month2, #month3').hide();
});
$('#month1').on('change', function() {
// ignore blank options
if ($(this).val() == '') { return; }
var today = new Date();
var birthdate = new Date();
birthdate.setMonth($('#month1').val());
monthsToGo = (today.getMonth() < birthdate.getMonth())
? birthdate.getMonth() - today.getMonth()
: (12 - today.getMonth()) + birthdate.getMonth()
;
$('#month2').hide();
$('#month3').hide();
if (monthsToGo == 1) {
this.monthsToGo = 13;
alert(this.monthsToGo);
} else if (monthsToGo == 2) {
$('#month2').show();
} else if (monthsToGo == 3) {
$('#month3').show();
} else {
this.monthsToGo = monthsToGo;
alert(this.monthsToGo);
}
});
$('#month2, #month3').on('change', function() {
this.monthToGo = $(this).val();
alert(this.monthToGo);
});
}($))