Question

我有2个下拉菜单，都有'name'= list1。我还有2个单选按钮'是'或'不'。当选择时，不应隐藏所有下拉菜单，当选择“是”时，所有下拉菜单都应该显示，但是当点击时只显示一个，点击否则显示没有。

要隐藏的JavaScript代码：

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

只有第一个显示在网页上。有谁知道为什么？

Answer 1

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()是“元素”，单数，而我提到的其他两种方法是“元素”，复数......

编辑：我很抱歉，我不认为IE支持.getElementsByClassName()直到版本9.如果您使用IE8，您可以在上面的函数中替换以下行：

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

其余的应该按原样运作。这是我在IE8中测试过的演示：http://jsfiddle.net/CVS2F/1/

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

Answer 2

为了清除所有的困惑，我想出了下面的工作测试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>

下拉菜单没有显示？

2 个答案: