Javascript 根据表单选择框选择显示(可见/隐藏不显示/隐藏)HTML 元素

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5692135/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 18:28:45  来源:igfitidea点击:

Show (Visible/Hidden NOT Show/Hide) HTML Element based on form select box selection

javascriptformshiddenvisibledrop-down-menu

提问by adg

The following worked perfectly for my needs. Took the state of a checkbox and did wonderful things for me; Made 3 different form elements visible (vs. show/hide) based on checkbox checked or not checked. Simple, I guess. Then again, I base "simple" on how symmetrical the code looks and if it's less that 10 lines. Other than that, I'm lost. However, I've officially given up on messing around with IE's checkbox border issue and X-browser alignment yippeedoodles. I want pixel perfect the hard way. But I lost that battle. But rather than get into any discussion about that, I need to accomplish the same thing using a form select box as I was able to do with the checkboxes (below):

以下内容非常适合我的需求。接受一个复选框的状态,为我做了很棒的事情;根据选中或未选中的复选框,使 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", "");
    }
}

Now, if I can accomplish the same thing using a select box (below), I will die a happy man.

现在,如果我可以使用选择框(下图)完成同样的事情,我会死得很开心。

This is as far as I've gotten. I'm super dizzy from reading Jquery/CSS man pages and I just can't put it all together.

这是我得到的。阅读 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>

回答by Naveed Ahmad

take a look at the selecttag:

看一下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>

Now you must give a selector class to each element you want to show/hide:

现在,您必须为要显示/隐藏的每个元素提供一个选择器类:

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

Now look at the javascript:

现在看看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"});
 });
});

回答by Naveed Ahmad

You can do something like this:

你可以这样做:

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

这在javascript中:

jQuery(document).ready(function(){
 jQuery("#selectBox").change(function(){
  jQuery(".toggle").hide();
  jQuery("#" + jQuery(this).val()).show();
 });
});