How can I switch elements based on selection?

Question

So I have a select element in my HTML file, I want to hide certain elements/a div when option 1 is selected, but show it when option 2 is selected.

                    <span class="register100-form-title">Options</span>
                    <br/><br/>
                    <div class="selectWrapper" id="dropDownSelect1">
                        <select class="selectBox" name="utype" id="options" placeholder="Options">
                            <option value="option1">Option 1</option>
                            <option value="option2">Option 2</option>
                        </select>
                    </div>
<br/><br/>
<div id="hide-this-div"> <!-- Hide this div if option1 is selected, else show it -->
                    <span class="register100-form-title">StackOverflow</span>
                    <br/><br/>
                    <div class="selectWrapper" id="dropDownSelect2">
                        <select class="selectBox" name="overflow" id="overflow" placeholder="overflow">
                            <option value="stack">stack</option>
                            <option value="overflow">overflow</option>
                        </select>
                    </div>
<br/><br/>
                    <span class="register100-form-title">StackOverflow2</span>
                    <br/><br/>
                    <div class="selectWrapper" id="dropDownSelect2">
                        <select class="selectBox" name="overflow2" id="overflow2" placeholder="overflow2">
                            <option value="overflow">overflow</option>
                            <option value="stack">stack</option>
                        </select>
                    </div>
</div>

<div id="div-to-show"> <!-- show this div if option 1 is selected, else hide -->
[..]
</div>

How could I achieve this, I know that I would probably need to change some style attribute of the div, but what exactly, and how can I do this using javascript? (probably if, else statement)

Answer 1

For JQuery you can use this You can use hide() and show()

 $(function(){ $("#hide-this-div").hide(); }); $("#options").change(function(){ if($(this).val() == 'option1'){ $("#hide-this-div").hide(); } else { $("#hide-this-div").show(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span class="register100-form-title">Options</span> <br/><br/> <div class="selectWrapper" id="dropDownSelect1"> <select class="selectBox" name="utype" id="options" placeholder="Options"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> </select> </div> <br/><br/> <div id="hide-this-div"> <span class="register100-form-title">StackOverflow</span> <br/><br/> <div class="selectWrapper" id="dropDownSelect2"> <select class="selectBox" name="overflow" id="overflow" placeholder="overflow"> <option value="stack">stack</option> <option value="overflow">overflow</option> </select> </div> <br/><br/> <span class="register100-form-title">StackOverflow2</span> <br/><br/> <div class="selectWrapper" id="dropDownSelect2"> <select class="selectBox" name="overflow2" id="overflow2" placeholder="overflow2"> <option value="overflow">overflow</option> <option value="stack">stack</option> </select> </div> </div>

For vanilaJS you can use this

 var hide_this_div = document.getElementById("hide-this-div"); window.addEventListener('load', function() { hide_this_div.style.display = "none"; }) document.querySelector('#options').addEventListener('change',function(){ var options_val = document.querySelector('#options').value; if(options_val == 'option1'){ hide_this_div.style.display = "none"; } else { hide_this_div.style.display = "block"; } });

 <span class="register100-form-title">Options</span> <br/><br/> <div class="selectWrapper" id="dropDownSelect1"> <select class="selectBox" name="utype" id="options" placeholder="Options"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> </select> </div> <br/><br/> <div id="hide-this-div"> <span class="register100-form-title">StackOverflow</span> <br/><br/> <div class="selectWrapper" id="dropDownSelect2"> <select class="selectBox" name="overflow" id="overflow" placeholder="overflow"> <option value="stack">stack</option> <option value="overflow">overflow</option> </select> </div> <br/><br/> <span class="register100-form-title">StackOverflow2</span> <br/><br/> <div class="selectWrapper" id="dropDownSelect2"> <select class="selectBox" name="overflow2" id="overflow2" placeholder="overflow2"> <option value="overflow">overflow</option> <option value="stack">stack</option> </select> </div> </div>

Answer 2

Here how just plain JS will look like:

<script type="text/javascript">
  var select = document.getElementById("dropDownSelect1");

  select.onchange = function (option) {
    const divToSwitch = document.getElementById("hide-this-div");
    if (option.target.value === "option1") {
      divToSwitch.hidden = true;
    } else {
      divToSwitch.hidden = false;
    }
  };
</script>