How to display elements with multiple value options?-CodePudding

I want to show hidden div when click on options. Now my code working for only 1 options(example - when i click on Monday and after that i click Friday its show only Monday div).Where is the problem in multiple-select or in javascript? This is multiple-select who i use https://www.cssscript.com/multi-select-dropdown-component-javascript-slim-select/ and this is in my html file.

function showDiv() {
  getSelectValue = document.getElementById("select").value;
  if (getSelectValue == "1") {
    document.getElementById("hidden_div1").style.display = "block";
  } else {
    document.getElementById("hidden_div1").style.display = "none";
  }
  if (getSelectValue == "2") {
    document.getElementById("hidden_div2").style.display = "block";
  } else {
    document.getElementById("hidden_div2").style.display = "none";
  }
  if (getSelectValue == "3") {
    document.getElementById("hidden_div3").style.display = "block";
  } else {
    document.getElementById("hidden_div3").style.display = "none";
  }
  if (getSelectValue == "4") {
    document.getElementById("hidden_div4").style.display = "block";
  } else {
    document.getElementById("hidden_div4").style.display = "none";
  }
  if (getSelectValue == "5") {
    document.getElementById("hidden_div5").style.display = "block";
  } else {
    document.getElementById("hidden_div5").style.display = "none";
  }
  if (getSelectValue == "6") {
    document.getElementById("hidden_div6").style.display = "block";
  } else {
    document.getElementById("hidden_div6").style.display = "none";
  }
  if (getSelectValue == "7") {
    document.getElementById("hidden_div7").style.display = "block";
  } else {
    document.getElementById("hidden_div7").style.display = "none";
  }
  if (getSelectValue == "8") {
    document.getElementById("hidden_div8").style.display = "block";
  } else {
    document.getElementById("hidden_div8").style.display = "none";
  }
}

<div >
  <label for="FileName">Event Name</label>
  <select id="select" multiple onchange="showDiv()">
    <optgroup label="Weekdays">
      <option value="1">Every Day</option>
      <option value="2">Monday</option>
      <option value="3">Tuesday</option>
      <option value="4">Wednesday</option>
      <option value="5">Thursday</option>
      <option value="6">Friday</option>
      <option value="7">Saturday</option>
      <option value="8">Sunday</option>
    </optgroup>
  </select>
</div>

<!-- Every Day -->
<div  id="hidden_div1" style="display: none;">
  <label for="FileName">Every Day</label>
  <input type="text"  id="name" name="name">
</div>

<!-- Monday -->
<div  id="hidden_div2" style="display: none;">
  <label for="FileName">Monday</label>
  <input type="text"  id="name" name="name">
</div>

<!-- Tuesday -->
<div  id="hidden_div3" style="display: none;">
  <label for="FileName">Tuesday</label>
  <input type="text"  id="name" name="name">
</div>

<!-- Wednesday -->
<div  id="hidden_div4" style="display: none;">
  <label for="FileName">Wednesday</label>
  <input type="text"  id="name" name="name">
</div>

<!-- Thursday -->
<div  id="hidden_div5" style="display: none;">
  <label for="FileName">Thursday</label>
  <input type="text"  id="name" name="name">
</div>

<!-- Friday -->
<div  id="hidden_div6" style="display: none;">
  <label for="FileName">Friday</label>
  <input type="text"  id="name" name="name">
</div>

<!-- Saturday -->
<div  id="hidden_div7" style="display: none;">
  <label for="FileName">Saturday</label>
  <input type="text"  id="name" name="name">
</div>

<!-- Sunday -->
<div  id="hidden_div8" style="display: none;">
  <label for="FileName">Sunday</label>
  <input type="text"  id="name" name="name">
</div>
</div>

CodePudding user response：

If you want to other input section to not to be removed after we clicked another option, you just have to remove all the else condition from the javascript code like this Cause everytime we change something in the option section, our showDiv() function fires and the unselected div that are visible will have display of none because of else condition

function showDiv() {
    getSelectValue = document.getElementById("select").value;
    if (getSelectValue == "1") {
      document.getElementById("hidden_div1").style.display = "block";
    } else {
    //   document.getElementById("hidden_div1").style.display = "none";
        
    }
    if (getSelectValue == "2") {
      document.getElementById("hidden_div2").style.display = "block";
    } else {
    //   document.getElementById("hidden_div2").style.display = "none";
    }
    if (getSelectValue == "3") {
      document.getElementById("hidden_div3").style.display = "block";
    } else {
    //   document.getElementById("hidden_div3").style.display = "none";
    }
    if (getSelectValue == "4") {
      document.getElementById("hidden_div4").style.display = "block";
    } else {
    //   document.getElementById("hidden_div4").style.display = "none";
    }
    if (getSelectValue == "5") {
      document.getElementById("hidden_div5").style.display = "block";
    } else {
    //   document.getElementById("hidden_div5").style.display = "none";
    }
    if (getSelectValue == "6") {
      document.getElementById("hidden_div6").style.display = "block";
    } else {
    //   document.getElementById("hidden_div6").style.display = "none";
    }
    if (getSelectValue == "7") {
      document.getElementById("hidden_div7").style.display = "block";
    } else {
    //   document.getElementById("hidden_div7").style.display = "none";
    }
    if (getSelectValue == "8") {
      document.getElementById("hidden_div8").style.display = "block";
    } else {
    //   document.getElementById("hidden_div8").style.display = "none";
    }
  }