下拉菜单不显示？

发布于 2025-01-02 17:51:37 字数 1477 浏览 0 评论 0原文

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

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

原文

I have 2 drop down menus which both have 'name'=list1. I also have 2 radio buttons 'yes' or 'no'. When select no all dropdown menus should be hidden, when selected 'yes' all drop down menus should show however at the minute only one is showing when clicked yes none showing when clicked no.

JavaScript code to hide:

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

code for 1st dropdwon:

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

code for 2nd drop down:

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

only the 1st is displaying on webpage. does anyone know why?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

马蹄踏│碎落叶 2025-01-09 17:51:37

id 属性应该是唯一的，即任何两个元素都不应具有相同的 id。如果您有两个（或更多）具有相同 id 的元素，则 document.getElementById( ) 方法可能会返回第一个 - 行为可能因浏览器而异，但在任何情况下它肯定只会返回一个元素或 null。

如果您想将相同的更改应用于多个相似的元素，您可以尝试为这些元素提供相同的类，并使用 .getElementsByClassName() 方法：

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

编辑： 抱歉，我不知道在版本 9 之前，IE 不支持 .getElementsByClassName()。如果您使用 IE8，您可以在上述函数中替换以下行：

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

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

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

The id attribute is supposed to be unique, i.e., no two elements should have the same id. If you have two (or more) elements with the same id the document.getElementById() method will likely return the first - behaviour may vary from browser to browser but in any case it will definitely only return either one element or null.

If you want to apply the same change to multiple similar elements you could try giving those elements the same class and select them with the .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>

Another method you might like to look into is .getElementsByTagName().

Notice that .getElementById() is "element", singular, while the other two methods I mentioned get "elements", plural...

EDIT: My apologies, I don't think IE supported .getElementsByClassName() until version 9. If you are using IE8 you can substitute the following line in the above function:

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

and the rest should work as is. Here is a demo that I've tested as working in IE8: http://jsfiddle.net/CVS2F/1/

Alternatively for even older IE version support where you can't use .querySelectorAll() you could just use .getElementsByTagName("div") and then within the loop test each returned element to see if it has the class you care about. Here's an updated demo that works that way: http://jsfiddle.net/CVS2F/2/

回复收藏 0 原文

妄想挽回 2025-01-09 17:51:37

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

To clear all your confusion, I came up with working test HTML below. Save the code as HTML and test if is it give what you wanted?

What you need to do is change 'id' to 'class', so you can select multiple elements into an array. Iterate that array and apply the style.

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

回复收藏 0 原文

~没有更多了~