下拉菜单不显示？

我有2个下拉菜单，它们都有'name'= list1。我也有2个单选按钮'是'或'不是'。当选择不应该隐藏所有的下拉菜单时，当选择'是'时，所有下拉菜单应该显示，但是当在点击时只显示一个是。下拉菜单不显示？

JavaScript代码来隐藏：对于第一个dropdwon

<script type="text/javascript"> 
function showDiv(targetElement,toggleElementClass){ 
    var els, 
     i; 
    if (targetElement.checked) { 
    els = document.getElementsByClassName(toggleElementClass); 
    for (i=0; i < els.length; i++) { 
     els[i].style.visibility = "visible"; 
     els[i].style.display = "block"; 
    } 
    } 
} 
function HideDiv(targetElement,toggleElementClass){ 
    var els, 
     i; 
    if (targetElement.checked) { 
    els = document.getElementsByClassName(toggleElementClass); 
    for (i=0; i < els.length; i++) { 
     els[i].style.visibility = "visible"; 
     els[i].style.display = "block"; 
    } 

// and similar for hideDiv() 
</script>

代码：对于第二个下拉

<div style="display: none;" class="list1" > 
<select name="colour"> 
    <option>Please Select</option> 
    <option>red</option> 
    <option>orange</option> 
    <option>blue</option> 
</select>

代码：

<div id="list2" style="display: none;" class="list2" > 
<select name="shade"> 
    <option>Please Select</option> 
    <option>dark</option> 
    <option>light</option> 
</select> 
</div>

只有1已显示在网页上。有谁知道为什么？

来源

2012-02-05 user1188711

javascript！= java – Jasper 2012-02-05 03:11:49

其中是'id = radio1'的HTML吗？ – xandercoded 2012-02-05 03:15:57

代码中的radio1和radio2等项目在哪里？ – 2012-02-05 03:21:26

id属性应该是唯一的，即没有两个元素应该具有相同的id。如果您有两个（或更多）具有相同ID的元素，那么document.getElementById() method可能会返回第一个 - 行为可能因浏览器而异，但无论如何它肯定只会返回一个元素或null。

如果您要应用到多个类似的元素，你可以尝试给这些元素的同一类，并与.getElementsByClassName() method选择他们同样变化：

<div class="list1"></div> 
<div class="list1"></div> 

<script> 
function showDiv(targetElement,toggleElementClass){ 
    var els, 
     i; 
    if (targetElement.checked) { 
    els = document.getElementsByClassName(toggleElementClass); 
    for (i=0; i < els.length; i++) { 
     els[i].style.visibility = "visible"; 
     els[i].style.display = "block"; 
    } 
    } 
} 

// and similar for hideDiv() 
</script>

另一种方法，你可能想看看是.getElementsByTagName()。

注意.getElementById()是“元素”，奇异的，而其他两种方法我提到GET“元素”，复数......

编辑：我的道歉，我不认为IE支持.getElementsByClassName()，直到版本9.如果您使用的是IE8，则可以在上述功能中替换以下行：

els = document.querySelectorAll("div." + toggleElementClass);

其余的应该按原样工作。下面是我在IE8测试工作演示：http://jsfiddle.net/CVS2F/1/

或者为更老版本的IE支持，你不能使用.querySelectorAll()你可以只使用.getElementsByTagName("div")，然后循环测试中的每个返回元素，看它有你关心的课程。这是一个更新的演示，可以这样工作：http://jsfiddle.net/CVS2F/2/

来源

2012-02-05 03:13:14 nnnnnn

我已编辑我的帖子。我可以使用修改过的代码，还是使用你的代码更好？ – user1188711 2012-02-05 03:28:43

我已将我的帖子重新编辑为您的建议。但它仍然不起作用。如果是“是”或“否”，则不会显示。请你能看看谢谢 – user1188711 2012-02-05 03:41:28

我的歉意，我忘了IE没有'。getElementsByClassName（）'直到版本9，所以尽管你没有提及你使用的是哪种浏览器，也许这就是你的错误，无论如何，你很可能需要支持旧版本。所以我用另外两个选项更新了我的答案。（就像我在旁边：我不会推荐for..in循环来访问一个类似数组的对象，使用我的答案中所示的常规for语句，for..in将起作用 - 除非它没有;在某些情况下，它会导致很难发现的错误）。 – nnnnnn 2012-02-05 04:17:08

要清除你所有的困惑，我想出了下面的工作测试HTML。将代码保存为HTML并测试它是否提供了您想要的内容？

你需要做的是将'id'改为'class'，这样你就可以在一个数组中选择多个元素。迭代该数组并应用该样式。

<html> 
<head> 
<script> 
window.onload=registerEventHandlers; 
document.getElementsByClassName = function (cn) { 
     var rx = new RegExp("(?:^|\\s)" + cn+ "(?:$|\\s)"); 
     var allT = document.getElementsByTagName("*"), allCN = [], ac="", i = 0, a; 
      while (a = allT[i=i+1]) { 
       ac=a.className; 
       if (ac && ac.indexOf(cn) !==-1) { 
       if(ac===cn){ allCN[allCN.length] = a; continue; } 
       rx.test(ac) ? (allCN[allCN.length] = a) : 0; 
       } 
      } 
     return allCN; 
    } 
function registerEventHandlers()    
{ 
     document.getElementById("radio1").onclick = function(){     
       hideDiv(this,"list1")    
     };    
     document.getElementById("radio2").onclick = function(){     
        showDiv(this,"list1")      
     };       
}    

function showDiv(targetElement,toggleElementId){ 
     var showAll=document.getElementsByClassName(toggleElementId); 
     for(i in showAll){ 
      showAll[i].style.visibility="visible"; 
      showAll[i].style.display="block"; 
     }       
}    
function hideDiv(targetElement,toggleElementId){     
     var hideAll=document.getElementsByClassName(toggleElementId); 
     for(i in hideAll){ 
      hideAll[i].style.visibility="hidden"; 
      hideAll[i].style.display="none"; 
     }        
} 
</script> 
</head> 
<body> 
Yes:<input type="radio" id="radio2" name="yesNo" value="yes" /> 
No:<input type="radio" id="radio1" name="yesNo" value="no"/> 
<div class="list1" style="display: none;" > 
     <select name="colour"> 
      <option>Please Select</option> 
      <option>red</option> 
      <option>orange</option> 
      <option>blue</option> 
     </select> 
</div> 
    <div class="list1" style="display: none;" > 
<select name="shade"> 
    <option>Please Select</option> 
    <option>dark</option> 
    <option>light</option> 
</select> 
</div> 
</body> 
</html>

来源

2012-02-05 03:43:09

在IE :( – 2012-02-05 03:56:33

我不使用IE浏览器无法正常工作。为什么不工作？你有没有试图调试？ – 2012-02-05 03:58:36

1.我不使用IE并不意味着所有其他人都不应该使用..无论你创建什么，都必须在ALL BROWSER中工作...... 2.为什么不在IE中工作对我来说不是问题。 ..你应该检查它为什么不工作，因为你已经编码它... – 2012-02-05 04:01:11

下拉菜单不显示？

回答

相关问题