How to add connected HTML select box with multiple lists?

So this is the current HTML I have written

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <select name="interval" id="sInterval" onchange="change1()">
        <option value="2">2</option>
        <option value="3">3</option>
        <option selected value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
    </select>
    <span>*2</span>
    <select name="interval" id="WeekInterval">
        <option value="Pick an option here">Pick an option here</option>
    </select>
</div>
<script>
    function change1() {
        //Doctor schedule
        let week = ["Mon", "Tue", "Wed", "Thr", "Fri"];
        let week2 = ["Mon","Wed","Thr"];
        let week3 = ["Wed","Fri"];
        let matching1 = ["2","3","4","6"];
        let matching2 = ["5","8"];
        let matching3= ["7","9","10"]
        const targetParent = document.getElementById("sInterval");
        const targetSon = document.getElementById("WeekInterval");
        targetSon.options.length = 0;
        console.log(targetParent.selectedIndex);
        if (targetParent.selectedIndex == 1) {
            week.forEach(i => {
                const optionElement = document.createElement("option")
                optionElement.innerText = i;
                optionElement.setAttribute("value", i)
                targetSon.append(optionElement)
            })
        }
    }
</script>
</body>

</html>

I need to display Mon, Tue, Wed, Thr and Fri to select box 2 when the values 2, 3, 4 or 6 are chosen in select box 1, and Mon, Wed, Thr when 5, 8 are chosen. Right now, I found out a way to use selectIndex to achieve this. But I had to write too many conditional statements and specify the index to get what I want.

Is there an easier way to achieve this function?

Answer

You can create an object, that matches the numeric value from the first select value on change, Those values would be the array of values you wish to create in the second drop down, then you just need to match the event.target.value in the object as a key to get the matching values to then create your options and assign their values.

const targetParent = document.getElementById("sInterval")
const targetSon = document.getElementById("WeekInterval")
const doctorDays = {
  '2': ["Mon", "Tue", "Wed", "Thr", "Fri"],
  '3': ["Mon", "Tue", "Wed", "Thr", "Fri"],
  '4': ["Mon", "Tue", "Wed", "Thr", "Fri"],
  '5': ["Mon", "Wed", "Thr"],
  '6': ["Mon", "Tue", "Wed", "Thr", "Fri"],
  '7': ["Mon", "Wed", "Thr"],
  '8': ["Wed", "Fri"],
  '9': ["Wed", "Fri"],
  '10': ["Wed", "Fri"]
}
// helper function to remove previously added options on change
const removeChildren = (parent) => {
  while (parent.lastChild) {
    parent.removeChild(parent.lastChild)
  }
}
// pass event into function
const checkDay = (e) => {
  // call removeChildren function
  removeChildren(targetSon)
  // get each array value within the obj key that matches that day
  doctorDays[e.target.value].forEach(day => {
    // create option element asign values and append to DOM
    const optionElement = document.createElement("option")
    optionElement.textContent = day
    optionElement.setAttribute("value", day)
    targetSon.append(optionElement)
  })
}


targetParent.addEventListener('change', checkDay)
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
  <div>
    <select name="interval" id="sInterval">
      <option value="2">2</option>
      <option value="3">3</option>
      <option selected value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
    <span>*2</span>
    <select name="interval" id="WeekInterval">
      <option value="Pick an option here">Pick an option here</option>
    </select>
  </div>
  <script>
  </script>
</body>

</html>
Source: stackoverflow
The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .