下拉菜單不顯示？

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

下拉菜單不顯示？

回答

相關問題