JavaScript 隐藏和显示表单元素答案

【问题标题】：JavaScript hiding and showing form elementsJavaScript 隐藏和显示表单元素
【发布时间】：2014-09-22 04:50:05
【问题描述】：

Options:    
<select id="selectOption" name="Option">

<option value="">Choose Option</option>

<option value="option1">1</option>

<option value="option2">2</option>

</select>

<div id="option1" class="">

//form element here//

</div>

<div id="option2" class="">

//form element here//

</div>

我的问题是，使用 JavaScript，如何使它在开始时看不到底部的 2 个 div？当您选择选项 1 时，它应该只显示第一个 div，如果您选择选项 2，它将显示第二个 div。

【问题讨论】：

检查 html 中元素的 display 属性.. display='none' 将隐藏它们

标签： javascript forms element

【解决方案1】：

你可以这样做：

<select id="selectOption" name="Option" onchange="optionSelect()">

<option value="">Choose Option</option>

<option value="option1">1</option>

<option value="option2">2</option>

</select>

<div id="option1" style="display:none">
DIV1
//form element here//

</div>

<div id="option2" style="display:none">
DIV2
//form element here//

</div>

然后在脚本中：

function optionSelect(){
    var e = document.getElementById("selectOption");
    var strUser = e.options[e.selectedIndex].value;
    document.getElementById(strUser).style.display = "block";
}

我正在做的是侦听选项更改，只要选择更改IM获得其值并使DIV与该选项值可见@

See the DEMO here

【讨论】：

【解决方案2】：

您可以默认隐藏divs，并在选择时触发onchange。

在javascript函数中，检查值并隐藏/显示对应的div。

<select id="selectOption" name="Option" onchange='checkOption()'>

Javascript：

function checkOption() {
   document.getElementsByTagName('div').style.display = 'none';
   document.getElementById(document.getElementById('selectOption').value).style.display = 'block';
}

【讨论】：

【解决方案3】：

你可以这样做

<select id="selectOption" name="Option" onChange="showDiv(this)">
   <option value="">Choose Option</option>
   <option value="option1">1</option>
   <option value="option2">2</option>
</select>

<div id="option1" class="" style="display:none;">
//form element here option 1//
</div>

<div id="option2" class="" style="display:none;">
//form element here option 2//
</div>

<script>
function showDiv(selectObj){
    var valueSelected= selectObj.value;

    // hide all div again
    document.getElementById('option1').style.display = "none";
    document.getElementById('option2').style.display = "none";

    // show the selected
    document.getElementById(valueSelected).style.display = "block";
}
</script>

showDiv函数在您每次从选择中选择一个选项时都会被调用。

在函数中，它获取值，因为该值是 div 的 id，您可以将其用作标识符。

首先隐藏两个 div 然后显示选定的，当用户选择第一个时它会隐藏两个。

【讨论】：

【解决方案4】：

按照您的要求执行的算法：

最初隐藏所有的div
将 div 的 id 设置为等于选择选项标签值
使用select标签的onchange函数并调用函数
在该函数中隐藏所有其他 div 并仅显示相应的 div。

这是他的 jsbin。 http://jsbin.com/pewihumokunu/1/edit

【讨论】：