使用javascript隱藏和取消隱藏div

Question

所以我有一個div ，當點擊input按鈕時我可以在其中顯示。

 <div class="select-list">
             <select name="relations" id="selectBox" style="text-transform: none;" class="select" required onchange="otherFunc()">
                <option value="">Choose</option>
                <option value="Son">Son</option>
                <option value="Daughter">Daughter</option>
                <option value="Other Relative">Other Relative</option>
                <option value="Other">Other</option>
            </select>

                <span class="highlight"></span>
                <span class="bar"></span>
        </div>
    </div>

    <script>
        function otherFunc() {
            var selectBox = document.getElementById("selectBox");
            var selectedValue = selectBox.options[selectBox.selectedIndex].value;
            console.log(selectedValue)
            if (selectedValue == "Other") {
                document.getElementById("other").innerHTML = ' <div class="group"><div class="col-25"><label>Please clarify if "Other"</label></div><div class="col-75"><input type="text" name="otherInput" required></div><span class="highlight"></span><span class="bar"></span></div>'
            } else {

            }
        }
    </script>

    <div id="other"></div>

但是，現在我想更改它，因此如果有人點擊Other ，然后將其更改回任何其他選項，它會再次隱藏該 div <div id="other"></div> 。 我怎樣才能做到這一點？

Answer 1

好吧，使用一些 css 類（在元素上設置visibility 、 opacity /其他屬性：

    <script>
      let otherDiv = undefined;
        function otherFunc() {
            var selectBox = document.getElementById("selectBox");
            var selectedValue = selectBox.options[selectBox.selectedIndex].value;
            console.log(selectedValue)
            if (selectedValue == "Other") {
                otherDiv = document.getElementById("other");
                otherDiv.style.opacity = 1;
                otherDiv.innerHTML = ' <div class="group"><div class="col-25"><label>Please clarify if "Other"</label></div><div class="col-75"><input type="text" name="otherInput" required></div><span class="highlight"></span><span class="bar"></span></div>'
            } else {
              if(!!otherDiv)
                otherDiv.style.opacity = 0;
            }
        }
    </script>

https://plnkr.co/edit/3sT9kwDyp5GBIC0Q?preview

Answer 2

你只需要添加document.getElementById("other").innerHTML = ''; 在你的else中隱藏 div。

 <div class="select-list"> <select name="relations" id="selectBox" style="text-transform: none;" class="select" required onchange="otherFunc()"> <option value="">Choose</option> <option value="Son">Son</option> <option value="Daughter">Daughter</option> <option value="Other Relative">Other Relative</option> <option value="Other">Other</option> </select> <span class="highlight"></span> <span class="bar"></span> </div> </div> <script> function otherFunc() { var selectBox = document.getElementById("selectBox"); var selectedValue = selectBox.options[selectBox.selectedIndex].value; console.log(selectedValue) if (selectedValue == "Other") { document.getElementById("other").innerHTML = ' <div class="group"><div class="col-25"><label>Please clarify if "Other"</label></div><div class="col-75"><input type="text" name="otherInput" required></div><span class="highlight"></span><span class="bar"></span></div>' } else { document.getElementById("other").innerHTML = ''; } } </script> <div id="other"></div>

Answer 3

解決方案 #1 保留原始代碼

 function otherFunc() { var selectBox = document.getElementById("selectBox"); var selectedValue = selectBox.options[selectBox.selectedIndex].value; console.log(selectedValue) if (selectedValue == "Other") { document.getElementById("other").innerHTML = ' <div class="group"><div class="col-25"><label>Please clarify if "Other"</label></div><div class="col-75"><input type="text" name="otherInput" required></div><span class="highlight"></span><span class="bar"></span></div>' } else { document.getElementById("other").innerHTML = ''; } }

 <div class="select-list"> <select name="relations" id="selectBox" style="text-transform: none;" class="select" required onchange="otherFunc()"> <option value="">Choose</option> <option value="Son">Son</option> <option value="Daughter">Daughter</option> <option value="Other Relative">Other Relative</option> <option value="Other">Other</option> </select> <span class="highlight"></span> <span class="bar"></span> </div> <div id="other"></div>

解決方案#2 你也可以這樣做

 var other = document.getElementById('other'); other.style.display = 'none'; function otherFunc() { var selectBox = document.getElementById("selectBox"); var selectedValue = selectBox.options[selectBox.selectedIndex].value; console.log(selectedValue) if (selectedValue == "Other") { other.style.display = 'block'; } else { other.style.display = 'none'; document.getElementById('otherInput').value = ''; } }

 <div class="select-list"> <select name="relations" id="selectBox" style="text-transform: none;" class="select" required onchange="otherFunc()"> <option value="">Choose</option> <option value="Son">Son</option> <option value="Daughter">Daughter</option> <option value="Other Relative">Other Relative</option> <option value="Other">Other</option> </select> <span class="highlight"></span> <span class="bar"></span> </div> <div id="other"> <div class="group"> <div class="col-25"> <label>Please clarify if "Other"</label> </div> <div class="col-75"> <input type="text" name="otherInput" Id="otherInput" required> </div> <span class="highlight"></span> <span class="bar"></span> </div> </div>