filter-times.html

<!--
*   @title  Filter times
*   @desc   Shows times available based on date
-->

<div>
  <label for="interviewDate">Interview Dates/Times</label>
  <select name="interviewDate" id="interviewDate" tabindex="-1">
      <option value="" disabled="disabled" selected="selected">Select One</option>
      <option value="Thursday, March 17">Thursday, March 17</option>
      <option value="Friday, March 18">Friday, March 18</option>
      <option value="Monday, March 21">Monday, March 21</option>
      <option value="Tuesday, March 22">Tuesday, March 22</option>
      <option value="Wednesday, March 23">Wednesday, March 23</option>
      <option value="Thursday, March 24">Thursday, March 24</option>
      <option value="Friday, March 25">Friday, March 25</option>
      <option value="Monday, March 28">Monday, March 28</option>
      <option value="Tuesday, March 29">Tuesday, March 29</option>
      <option value="Wednesday, March 30">Wednesday, March 30</option>
  </select>
  <label for="interviewTime" class="sr-only">Interview Times</label>
  <select name="interviewTime" id="interviewTime" tabindex="-1">
      <option value="" disabled="disabled" selected="selected">Select One</option>
      <option data-day="17,22,24,29" value="12-12:45 p.m.">12-12:45 p.m.</option>
      <option data-day="30" value="2-2:45 p.m.">2-2:45 p.m.</option>
      <option data-day="17,24" value="2:30-3:15 p.m.">2:30-3:15 p.m.</option>
      <option data-day="18,25,30" value="3-3:45 p.m.">3-3:45 p.m.</option>
      <option data-day="23" value="3:30-4:15 p.m.">3:30-4:15 p.m.</option>
      <option data-day="29" value="4-4:45 p.m.">4-4:45 p.m.</option>
      <option data-day="23,30" value="4:30-5:15 p.m.">4:30-5:15 p.m.</option>
      <option data-day="21,28,29" value="5-5:45 p.m.">5-5:45 p.m.</option>
      <option data-day="17,24" value="5:30-6:15 p.m.">5:30-6:15 p.m.</option>
      <option data-day="21,28" value="6-6:45 p.m.">6-6:45 p.m.</option>
  </select>
</div>

<script>
  const interviewDate = document.querySelector('#interviewDate')
  const timeOptionEls = Array.from(document.querySelectorAll('[data-day]'))

  interviewDate.addEventListener('input', (e) => {
      timeOptionEls.map((options) => (options.style.display = 'block'))

      const date = e.target.value.slice(-2)

      timeOptionEls
          .filter((option) => !option.dataset.day.split(',').includes(date))
          .map((options) => (options.style.display = 'none'))
  })
</script>