显示(可见/隐藏而不是显示/隐藏)基于表单选择框选择的HTML元素
Show (Visible/Hidden NOT Show/Hide) HTML Element based on form select box selection
以下内容完全符合我的需求。拿起一个复选框的状态,为我做了很棒的事情;使3个不同的表单元素可见(vs.显示/隐藏)基于复选框选中或未选中。我想很简单。再一次,我将"简单"的基础建立在代码的对称程度上,以及它是否少于10行。除此之外,我迷路了。然而,我已经正式放弃了IE的复选框边界问题和x浏览器对齐问题。我想要像素完美。但我输掉了这场战斗。但与其就此展开任何讨论,我需要使用表单选择框来完成与下面的复选框相同的事情:
<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"});
});
});
你可以这样做:
<html>
<form id="form">
<input type="text" id="IdOne" class="toggle" />
<input type="text" id="IdTwo" class="toggle" />
<input type="text" id="IdThree" class="toggle" />
<select name="SelectBox" id="selectBox">
<option value="0">Make a Choice</option>
<option value="IdOne">First element</option>
<option value="IdTwo">Second element</option>
<option value="IdThree">Third element</option>
</select>
</html>
this in javascript:
jQuery(document).ready(function(){
jQuery("#selectBox").change(function(){
jQuery(".toggle").hide();
jQuery("#" + jQuery(this).val()).show();
});
});
相关文章:
- 使用较少代码隐藏和显示选择菜单内容的更好方法是什么?javascript
- 首先显示选择最多的项目
- 根据以前的选择显示选择选项
- 在屏幕上显示选择选项图像
- 如何在Jquery中显示选择选项之前更新这些选项
- 在外部触发器上显示选择框选项
- 如何显示隐藏和显示选择框
- 使用javascript显示选择列表中的值
- 用js突出显示选择菜单
- Javascript 代码显示选择值
- Jquery/JS:通过样式显示显示选择框(无,块)
- KnockoutJS不显示选择
- JS/AJAX:隐藏/显示选择框
- 并排显示选择框中的两个选项
- 如果选中复选框,则显示选择字段
- 如何在D3部队布局中突出显示/选择邻居的邻居
- 显示选择下拉列表中的结果,然后克隆并添加另一个选择
- 显示选择选项文本日期
- 如何更改相同的 ng 重复值并仅显示选择值 angularjs
- CognosReportStudio:在报告中显示选择和搜索提示中的搜索词和选项