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)

CodePudding user response：

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>

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>