JSFiddle - React, Tailwind, and code Playground
HTML
<div class="form-group">
<label></label>
<select class="form-control" name="month">
<option selected disabled>- Month -</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
</select>
<select class="form-control" name="day">
<option selected disabled>- Day -</option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
JavaScript
//create our data
data = {
disabled_days: {
"June": [3, 5, 7, 9],
"July": [10, 20, 30],
"August": [1, 2, 3, 4]
}
}
//get the select month box
let select_month = document.querySelector('select[name="month"]');
//when a month is selected...
select_month.addEventListener('change', function(e) {
//get the name of the month
let month = select_month[select_month.selectedIndex].textContent;
// get all the days in the day select box
// enable all of them
let day_arr = [].slice.call(document.querySelectorAll('select[name="day"] option'))
for (let day of day_arr) day.disabled = false;
// loop over all the days to be disabled
// find them in the data object based on the month name
// disable those days
for (let disabled_day of data.disabled_days[month]) {
for (let day of day_arr) {
if (day.textContent == disabled_day) day.disabled = true;
}
}
})