Question

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，如果你选择option2，它会显示第二个div。

Answer 1

您可以默认隐藏div两个，并在选择中触发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';
}

Answer 2

你可以这样做

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

每次从select中选择一个选项时，都会调用showDiv函数。

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

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

Answer 3

你可以这样做：

<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";
}

我正在做的是监听选项更改，只要选项正在更改即可获取其值并使该选项值的div可见display='block'

<强> See the DEMO here

Answer 4

算法做你所问的：

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

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

JavaScript隐藏和显示表单元素

4 个答案: