JavaScript隱藏和顯示錶單元素

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> 

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

​​

Answer 4

算法做你問：

1. 最初隱藏所有的div
2. 設置id的div的等於選擇選項標記的值
3. 使用的onchange選擇標籤的功能和調用功能
4. 在該功能中隱藏所有其他div並僅顯示相應的div。

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