[英]hide and unhide div using javascript
所以我有一个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>
。 我怎样才能做到这一点?
好吧,使用一些 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>
你只需要添加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>
解决方案 #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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.