JavaScript隐藏和显示表单元素 选项： 选择选项 1. 2. //这里的表单元素// //这里的表单元素//

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

您可以在默认情况下隐藏这两个

div

，并在选择按钮上触发

onchange

在javascript函数中，检查该值并隐藏/显示相应的

div

Javascript:

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>

---

你可以这样做

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

选择选项
1.
2.
//这里的表单元素选项1//
//这里的表单元素选项2//
函数showDiv（选择对象）{
var value SELECTED=selectObj.value；
//再次隐藏所有div
document.getElementById（'option1'）.style.display=“无”；
document.getElementById（'option2'）.style.display=“无”；
//显示所选的
document.getElementById（valueSelected）.style.display=“block”；
}

每次从选择菜单中选择选项时，都会调用

showDiv

函数

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

首先隐藏两个div，然后显示所选的div，当用户选择第一个div时执行此操作，它将同时隐藏这两个div。

您可以像这样执行：

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

我所做的是监听选项更改，每当选项更改时，我都会获取其值，并使具有该选项值的div可见

display='block'

---

执行要求的算法：

最初隐藏所有div

将div的id设置为select选项标记值

使用select标记的onchange函数并调用函数

在该函数中，隐藏所有其他div并仅显示相应的div

他来了。

---

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

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