How to display elements with multiple value options?

Question

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 class="form-group">
  <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 class="form-group" id="hidden_div1" style="display: none;">
  <label for="FileName">Every Day</label>
  <input type="text" class="form-control" id="name" name="name">
</div>

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

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

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

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

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

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

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

Your whole showDiv function assumes there is only one selected value, it does not try to get multiple values or loop through them or anything. — ADyson, Aug 02 '22 at 09:06
P.S. Start by actually getting all the selected values - see https://stackoverflow.com/a/31544256/5947043 — ADyson, Aug 02 '22 at 09:06
@ADyson i put this on my code - `const selected = document.querySelectorAll('#select option:checked'); const values = Array.from(selected).map(el => el.value);` and its same.. I try and other and dont work too. — Виктор Минчев, Aug 02 '22 at 09:37
You have to change the rest of your code as well so it loops through the values, as I already mentioned — ADyson, Aug 02 '22 at 11:13
Also change the logic so it doesn't hide the values immediately after spotting it's not the right value. Instead, hide them all at the start, then loop through the selection and just show each one which matches. — ADyson, Aug 02 '22 at 11:14

score 0 · Accepted Answer · answered Aug 02 '22 at 12:37

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";
    }
  }

How to display elements with multiple value options?

1 Answers1