根據下拉菜單選擇顯示/隱藏

Question

所以我有一個下拉菜單。此下拉菜單的ID是「課程」。此下拉菜單還有一個附加屬性，onclick="displayField();

該下拉列表有2個選項。

2和3

現在，我想用類rsform-block-cotecours1取決於選擇的選項上被隱藏的一切。

這裏是JavaScript爲：

function displayField() 
{ 
    if(document.getElementById("courses").text == '2';) 
    document.getElementsByClassName('rsform-block-cotecours1').style.display="none"; 

    if(document.getElementById("courses").text == '3';) 
    document.getElementsByClassName('rsform-block-cotecours1').style.display=""; 
} 


window.addEvent('domready', function() { 
displayField(); 
}); 

但是，這並不工作，我不知道爲什麼。

Answer 1

這是你在找什麼？

小提琴：fiddle

<select id="courses" onchange="ddlChange()"> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

的JavaScript

function ddlChange() { 

    if (document.getElementById("courses").value =="2"){ 
     document.getElementsByClassName('rsform-block-cotecours1')[0].style.display="none"; 
     alert(document.getElementById("courses").value); 
    }  
    if (document.getElementById("courses").value == "3"){ 
     document.getElementsByClassName('rsform-block-cotecours1')[0].style.display="block"; 
     alert(document.getElementById("courses").value); 
    }  
} 

Answer 2

變化

function displayField() 
{ 
    if(document.getElementById("courses").value == '2';) 
    document.getElementsByClassName('rsform-block-cotecours1')[0].style.display="none"; 

    if(document.getElementById("courses").value == '3';) 
    document.getElementsByClassName('rsform-block-cotecours1')[0].style.display=""; 
} 


window.addEvent('domready', function() { 
displayField(); 
}); 

的情況下，你要訪問的分機和JavaScript的下拉列表中沒有值的代碼，以跟蹤和測試，然後使用下面的代碼從接接入選擇選項的文本下來

var courseElement = document.getElementById("courses"); 
var text = ""; 
if (courseElement.selectedIndex != -1) 
{ 
    text = courseElement.options[courseElement.selectedIndex].text; 
}