根据下拉菜单选择显示/隐藏

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