如何根據選擇切換元素？

所以select我的 HTML 檔案中有一個元素，我想在option 1被選中時隱藏某些元素/div ，但在option 2被選中時顯示它。

                    <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>

我怎么能做到這一點，我知道我可能需要更改 div 的一些樣式屬性，但究竟是什么，我該如何使用 javascript 做到這一點？（可能是 if, else 陳述句）

uj5u.com熱心網友回復：

簡單的 JS 看起來是這樣的：

<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>

uj5u.com熱心網友回復：

因為JQuery 你可以使用這個你可以使用hide()和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>

因為vanilaJS你可以使用這個

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>

標籤：javascript html 查询

上一篇：如何使函式選擇并在新添加的元素上執行？

下一篇：如何使用jquary預填充欄位