显示/隐藏下拉

这里是我的代码：显示/隐藏下拉

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

我将有更多的像医院领域领域，所以我需要做的不止一个。我需要一个下拉菜单来显示何时选中某个单选按钮。但所有我在JavaScript尝试不起作用。我是新来的JavaScript。

来源

2011-07-27 Emily

为你不需要的style.visibility...线枝节问题

一两件事：

通常情况下，它能够更好使用的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; 
    } 
}

，然后只用

addEvent(
    document.getElementById("radio1"), 
    "change", 
    function(){ 
     if(this.checked == true){ 
      document.getElementById("list1").style.display = "none"; 
     } 
    }, 
    false);

这是一个跨浏览器和更好的做法

来源

2011-07-27 17:47:01 mrBorna

仍然无法正常工作：/ – Emily

这里最大的问题是JavaScript将在单选按钮被创建之前执行。因此document.getElementById(...)不会找到该元素，因为它不存在。尝试将你的代码添加到一个函数中，并让该函数负责运行正文。

来源

2011-07-27 17:49:34

我认为它是因为代码是在列表实际添加到文档结构之前执行的。封装它在这样的在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
warappa

来源

2011-07-27 17:50:32

你必须等待，直到你的对象（单选按钮负载）下面是一些代码工作。或致电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>

来源

2011-07-27 18:00:07 Spooks

显示/隐藏下拉

回答

相关问题