显示/隐藏下拉菜单
[英]show/hide drop down
问题描述
here is my code: 
这是我的代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">
document.getElementById("radio1").onchange = function() {
if(this.checked == true) {
document.getElementById("list1").style.visibility = "hidden";
document.getElementById("list1").style.display = "none";
}
};
document.getElementById("radio2").onchange = function() {
if(this.checked == true) {
document.getElementById("list1").style.visibility = "visible";
document.getElementById("list1").style.display = "block";
}
};
</script>
</HEAD>
<BODY>
<form method = "post">
<br /><p id="first"><label>First Name:</label><input type="text" name="first" size="30" /></p>
<br /><p id="last"><label>Last Name:</label><input type="text" name="last" size="30" /></p>
<br /><p id="instructor"><label>Instructor:</label><select name="instructor">
<option value="instructor1">instructor1</option>
<option value="instructor2">instructor2</option></select></p>
<br /><p id="hospitalorientation"><label>Hospital Orientation:</label>
<div id='buttons'>
<label><input id="radio1" type="radio" name="hospital" /> Not Complete </label>
<label><input id="radio2" type="radio" name="hospital" /> Complete </label>
</div>
<div id="list1" style="display: none;">
<label>Month Complete:
<select>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
</label>
</div>
</form>
</BODY>
</HTML>
I will have more fields like the hospital field, so i will need to do it more than one. 我将拥有更多的领域，例如医院领域，因此我将需要做的不止一个。 I need a drop down to show when a certain radio button is selected. 我需要显示一个下拉菜单，以选择某个单选按钮。 But everything i try in javascript doesnt work. 但是我尝试使用javascript进行的所有操作均不起作用。 I am new to javascript. 我是javascript新手。
4 个解决方案
解决方案1
1 2011-07-27 17:50:32
I think its because the code is executed BEFORE the list is actually added to the document structure. 我认为是因为代码是在列表实际添加到文档结构之前执行的。 Encapsulate it in a window.onload handler like this: 将其封装在window.onload处理程序中，如下所示：
...
<script type="text/javascript">
window.onload=function()
{
document.getElementById("radio1").onchange = function()
{
if(this.checked == true)
{
document.getElementById("list1").style.visibility = "hidden";
document.getElementById("list1").style.display = "none";
}
};
document.getElementById("radio2").onchange = function()
{
if(this.checked == true)
{
document.getElementById("list1").style.visibility = "visible";
document.getElementById("list1").style.display = "block";
}
};
}
</script>
...
Lg g
warappa Warappa
解决方案2
0 2011-07-27 17:47:01
as a side issue you dont need the style.visibility... line 作为附带问题，您不需要style.visibility...行
one more thing: 还有一件事：
Typically, its better to add event listeners using the attachEvent or addEventListener methods (allows more control, and multiple listeners for one action) like this: 通常，最好使用attachEvent或addEventListener方法添加事件侦听器（允许更多控制，并为一个操作使用多个侦听器），如下所示：
function addEvent(el, eType, fn, uC) {
if (el.addEventListener) {
el.addEventListener(eType, fn, uC);
return true;
}
else if (el.attachEvent) {
return el.attachEvent('on' + eType, fn);
}
else {
el['on' + eType] = fn;
}
}
and then just use 然后就用
addEvent(
document.getElementById("radio1"),
"change",
function(){
if(this.checked == true){
document.getElementById("list1").style.display = "none";
}
},
false);
This is both cross-browser and better practice 这既是跨浏览器，也是更好的实践
解决方案3
0 2011-07-27 17:49:34
Your biggest issue here is that the javascript is going to execute prior to the radio buttons being created. 您最大的问题是，JavaScript将在创建单选按钮之前执行。 Therefore document.getElementById(...) is not going to find the element, as it doesn't exist. 因此document.getElementById(...)不会找到该元素，因为它不存在。 Try adding your code to a function and having that function run onload of the body. 尝试将代码添加到函数中，并让该函数在主体上运行。
解决方案4
0 2011-07-27 18:00:07
You have to wait until your object (radio button load) Here is some code that works. 您必须等到对象（单选按钮加载）为止，这里有一些有效的代码。 Or call the window.onload 或致电window.onload
<script type="text/javascript">
function checkEm() {
if (document.getElementById("radio1").checked) {
document.getElementById("list1").style.visibility = "hidden";
document.getElementById("list1").style.display = "none";
};
if (document.getElementById("radio2").checked) {
document.getElementById("list1").style.visibility = "visible";
document.getElementById("list1").style.display = "block";
};
};
</script>
<label><input id="radio1" type="radio" name="hospital" onclick="checkEm()" /> Not Complete </label>
<label><input id="radio2" type="radio" name="hospital" onclick="checkEm()" /> Complete </label>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.