Changing html content with javascript based on dropdown selection

Question

I have a code in which I want different html elements to appear and disappear based on selection in html dropdown. The problem is that the console returns the value of the dropdown correctly but with the given code below, none of the html appear upon changing the value of the dropdown. Here's the code: http://textuploader.com/dhzi6

HTML

<select id="dropDown">
 <option value="default" selected="selected"> Please select shape </option>
 <option value="one" id="rectangle">Rectangle</option>
 <option value="two" id="triangle">Triangle</option>
 <option value="three" id="circle">Circle</option>
</select>

<div id="wrapperOne"></div>
<div id="wrapperTwo"></div>
<div id="wrapperThree"></div>

JS

 var dropDown = document.getElementById("dropDown"),
   myWrappers = [
      document.getElementById("wrapperOne"),
      document.getElementById("wrapperTwo"),
      document.getElementById("wrapperThree")
   ];


for (i=0; i<myWrappers.length; i++){    
    if(dropDown.value === "default"){ 
       myWrappers[i].style.display = "none";
     } else if(dropDown.value === "one"){
       myWrappers[i].style.display = "none";
       myWrappers[0].style.display = "block";
      } else if(dropDown.value === "two"){
       myWrappers[i].style.display = "none";
       myWrappers[1].style.display = "block";
      } else if(dropDown.value === "three"){
       myWrappers[i].style.display = "none";
       myWrappers[2].style.display = "block";
      }
 }

Please insert a snippet of the code in your question, or add a codepen or a jsfiddle or something. What have you tried ? What failed ? Shouldn't your script be inside a ` — Exception_al, Feb 15 '18 at 09:52
Possible duplicate of [Get selected value in dropdown list using JavaScript?](https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) — Advena, Feb 15 '18 at 09:53

score 1 · Answer 1 · edited Feb 15 '18 at 10:57

The problem is you have not fired the onchange event. Add onchange event for your select box and kept your javascript code inside one function. It will work.

HTML

<select id="dropDown" onchange="test()">
   <option value="default" selected="selected"> Please select shape </option>
 <option value="one" id="rectangle">Rectangle</option>
 <option value="two" id="triangle">Triangle</option>
 <option value="three" id="circle">Circle</option>
</select>

<div id="wrapperOne"><h1>First</h1></div>
<div id="wrapperTwo"><h1>Second</h1></div>
<div id="wrapperThree"><h1>Third</h1></div>

JS

var dropDown = document.getElementById("dropDown"),
    myWrappers = [
       document.getElementById("wrapperOne"),
       document.getElementById("wrapperTwo"),
       document.getElementById("wrapperThree")
    ];
 function test() {
   for (i=0; i<myWrappers.length; i++){
     if(dropDown.value === "default"){ 
        myWrappers[i].style.display = "none";
     } else if(dropDown.value === "one"){
       myWrappers[i].style.display = "none";
       myWrappers[0].style.display = "block";
     } else if(dropDown.value === "two"){
       myWrappers[i].style.display = "none";
       myWrappers[1].style.display = "block";
     } else if(dropDown.value === "three"){
       myWrappers[i].style.display = "none";
       myWrappers[2].style.display = "block";
     }
  }
}

FIDDLE DEMO

UPDATE

Now the above code will run successfully, but the way you are achieving the desired result is too complicated. You can make it very simple and neat. Look at the following code javascript code.

function changeEvent() {
    var dropDown = document.getElementById("dropDown").value;

    if(dropDown === "default"){
        document.getElementById('wrapperOne').style.display = 'block';
        document.getElementById('wrapperTwo').style.display = 'block';
        document.getElementById('wrapperThree').style.display = 'block';   
     } else {
       document.getElementById('wrapperOne').style.display = 'none';
        document.getElementById('wrapperTwo').style.display = 'none';
        document.getElementById('wrapperThree').style.display = 'none';
        if(dropDown === "one"){
           document.getElementById('wrapperOne').style.display = 'block';      
        } else if(dropDown === "two"){
           document.getElementById('wrapperTwo').style.display = 'block';
        } else if(dropDown === "three"){
           document.getElementById('wrapperThree').style.display = 'block';
        }
     }
  }

In the above code, first thing there is no for loop. Simply check the selected value and display the html parts accordingly. The same I have added in the snippet below.

function changeEvent() {
    var dropDown = document.getElementById("dropDown").value;

    if(selvalue === "default"){
        document.getElementById('wrapperOne').style.display = 'block';
        document.getElementById('wrapperTwo').style.display = 'block';
        document.getElementById('wrapperThree').style.display = 'block';   
     } else {
       document.getElementById('wrapperOne').style.display = 'none';
        document.getElementById('wrapperTwo').style.display = 'none';
        document.getElementById('wrapperThree').style.display = 'none';
    if(selvalue === "one"){
     document.getElementById('wrapperOne').style.display = 'block';      
    } else if(selvalue === "two"){
     document.getElementById('wrapperTwo').style.display = 'block';
    } else if(selvalue === "three"){
    document.getElementById('wrapperThree').style.display = 'block';
     }
    }
  }

<select id="dropDown" onChange="changeEvent()">
     <option value="default" selected="selected"> Please select shape </option>
     <option value="one" id="rectangle">Rectangle</option>
     <option value="two" id="triangle">Triangle</option>
     <option value="three" id="circle">Circle</option>
    </select>

    <div id="wrapperOne"><h1>This is Wrapper ONE</h1></div>
    <div id="wrapperTwo"><h1>This is Wrapper TWO</h1></div>
    <div id="wrapperThree"><h1>This is Wrapper THREE</h1></div>

I would even suggest, instead of using only style.display = "none" and "block", to use css and create a class called .hide{display:none}; and removing or adding it to the element in question. style.display is hardcoded. Moreover, if style.display = "none" is used, it should be removed with style.removeProperty('display'); which removes the hard coded javascript part. — Advena, Feb 15 '18 at 10:40

Cata John · Answer 2 · 2018-02-15T10:37:43.283

If you are willing to use jQuery i would suggest this:

$('#dropDown').on('change', function(e){
  var selectedOption = $(this).find(':selected');

  if (selectedOption.attr('data-id') != null) {
    $('.wrapper:not(#' + selectedOption.attr('data-id') + ')').hide();
    $('#' + selectedOption.attr('data-id')).show();
  } else {
    $('.wrapper:not(:hidden)').hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropDown">
  <option value="default" selected="selected"> Please select shape </option>
  <option data-id="wrapperOne" value="one" id="rectangle">Rectangle</option>
  <option data-id="wrapperTwo" value="two" id="triangle">Triangle</option>
  <option data-id="wrapperThree" value="three" id="circle">Circle</option>
</select>

<div id="wrapperOne" class="wrapper" style="display: none;">One</div>
<div id="wrapperTwo" class="wrapper" style="display: none;">Two</div>
<div id="wrapperThree" class="wrapper" style="display: none;">Three</div>

With best regards, John

I admire you that you answered the question, however, downvote for jQuery. It was never a question to do so, and the web exists without it! — Advena, Feb 15 '18 at 10:35

Changing html content with javascript based on dropdown selection

2 Answers2