以下内容非常适合我的需求。采用复选框的状态并为我做了很棒的事情；根据选中或未选中的复选框使 3 个不同的表单元素可见(相对于显示/隐藏)。我想很简单。再一次，我将“简单”基于代码的对称程度以及它是否少于 10 行。除此之外，我迷路了。然而，我已经正式放弃摆弄 IE 的复选框边框问题和 X 浏览器对齐 yippeedoodles。我想要像素完美的困难方式。但我输掉了那场战斗。但是，我不想对此进行任何讨论，而是需要使用表单选择框来完成与我能够使用复选框(如下)所做的相同的事情:
<form id="form">
<input id="checkbox" name="checkbox" type="checkbox" onclick="showhideid" />
</form>
#IdOne, #IdTwo, #IdThree (visibility:hidden;}
function showhideid()
{
if (document.form.checkbox.checked)
{
document.getElementById("IdOne").style.visibility = "visible";
document.getElementById("IdTwo").style.visibility = "visible";
document.getElementById("IdThree").style.visibility = "visible";
document.getElementById("IdFour").setAttribute("class", "required");
}
else
{
document.getElementById("IdOne").style.visibility = "hidden";
document.getElementById("IdTwo").style.visibility = "hidden";
document.getElementById("IdThree").style.visibility = "hidden";
document.getElementById("IdFour").setAttribute("class", "");
}
}
现在，如果我可以使用选择框(如下)完成同样的事情，我会很高兴地死去。
这就是我所得到的。阅读 Jquery/CSS 手册页让我头晕目眩，我无法将它们放在一起。
<html>
<form id="form">
<select name="SelectBox">
<option>Make a Choice</option>
<option value="Value1">Selection1</option>
<option value="Value2">Selection2</option>
<option value="Value3">Selection3</option>
</select>
<label id="IdOne" for="input1">MeAndMyInputAreInvisibleByDesign</label>
<input id="IdTwo" name="input1" type="text">
<span id="IdThree">Im Not In display:none Mode I'm In visibility:hidden Mode. Big difference."
</span>
<input id="IdFour" name="input2" type="text" class="I have none, but I will soon. I hope" />
</form>
</html>
最佳答案
看看 select 标签:
<select name="SelectBox">
<option>Make a Choice</option>
<option value="IdTwo">Selection1</option> <!-- the value should be the id of the input field -->
<option value="IdThree">Selection2</option>
<option value="IdFour">Selection3</option>
</select>
现在您必须为每个要显示/隐藏的元素指定一个选择器类:
<input id="IdTwo" name="input1" type="text" class="toggle">
<span id="IdThree" class="toggle">
Im Not In display:none Mode I'm In visibility:hidden Mode. Big difference."
</span>
<input id="IdFour" name="input2" type="text" class="toggle" />
现在看看 javascript:
jQuery(document).ready(function(){
jQuery('input[name="SelectBox"]').change(function(){
jQuery('.toggle').css({"visibility":"hidden"});//Hide all
jQuery("#" + jQuery(this).val()).css({"visibility":"visible"});
});
});
关于javascript - Show (Visible/Hidden NOT Show/Hide) 基于表单选择框选择的 HTML 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5692135/