CODEWITHSUNDEEP
javascripthtmlhideshow
dori2o
dori2o

Reputation: 31

Show/Hide Multiple DIVs based on Dropdown/Select Option

So I'm new to HTML/CSS/Javascript and I'm trying to create a simple form which has 5 sections which are within a seperate Div. (So 5 Div,s)

I have a dropdown option for which the code is here

        <select value="Test1" name="Test1">
          <option  value="1">One</option>
          <option  value="2">Two</option>
          <option  value="3">Three</option>
          <option  value="4">Four</option>
          <option  value="5">Five</option>
        </select>

Depending on the options selected I want to show a different selection of Div's.

Option 1 is None Visible at all Option 2 is Div1, Div3 and Div5 Option 3 is Div2, Div4 and Div5 Option 4 is Div1, Div3 and Div4 Option 5 is Div2 and Div4

I've been looking online at various JS and JQuery scripts to help manage this but I've managed to confuse myself.

I cannot use JQuery, it has to be Javascript.

If there is not possible way of doing this with Javascript then if a JQuery option is available I might be able to convince those that matter that it is necessary.

Thanks in advance for any help you all can give.

Upvotes: 0

Views: 2984

Answers (3)

Marik Ishtar
Marik Ishtar

Reputation: 3049

You need to:

first retrieve the selected value, and select all the 5 boxes then use a switch, loop throw the 5 boxes and based on the selected value display or hide the box

check the code in code pen

Upvotes: 0

D. Seah
D. Seah

Reputation: 4592

you can have a javascript function like this

var display = {
  1: [],
  2: [1, 3, 5],
  3: [2, 4, 5],
  4: [1, 3, 4],
  5: [2, 4]
}

function selectChanged() {
  var sel = document.getElementById("select");
  for (var i = 1; i < 6; i++) {
        document.getElementById("box" + i).classList.add("hidden");
  }
  display[sel.value].forEach(function(i) {
        document.getElementById("box" + i).classList.remove("hidden");
  });
}

demo https://jsfiddle.net/3cuw0oks/1/

Upvotes: 1

Brenden Price
Brenden Price

Reputation: 537

I hope this helps or someone comes along with a more elegant solution. I'm still very new to this as well, but this would be my theoretical approach.

I would assign classes to the div tags. Since you can assign more than one class to an element this should work. For example:

<div id="Div1" class = "optionTwo optionFour hiddenDiv">content...</div>
<div id="Div2" class = "optionThree optionFive hiddenDiv">content...</div>
<div id="Div3" class = "optionTwo optionFour hiddenDiv">content...</div>
<div id="Div4" class = "optionThree optionFour optionFive hiddenDiv">content...</div>
<div id="Div5" class = "optionTwo optionThree hiddenDiv">content...</div>

You could then use JavaScript to determine which option is selected, then disable the hiddenDiv class from the appropriate divs, by calling it by a different class name..

var selectedOption = document.getElementByName("Test1")[0].value;
if (selectedOption.value == "1") {
    var element = document.getElementByClassName("optionOne");
    element.classList.remove("hiddenDiv");
}
if (selectedOption.value == "2") {
...

Then in the head of your HTML, you can do the following:

<head>
<style>
   .hiddenDiv{
      display: none;
   }
</style>
</head>

Just make sure that you check to see if something was selected, then the selection was changed. Because this will not add the class back to it if it's unselected. Maybe consider telling it to add the hiddenDiv class to all divs that are not affected by the currently selected option.

Upvotes: 0

Related Questions