ドロップダウンメニューが表示されない？

私は 'name' = list1という2つのドロップダウンメニューを持っています。私はまた、2つのラジオボタン 'はい'または 'いいえ'を持っています。すべてのドロップダウンメニューを非表示にする必要はありません。「はい」を選択すると、すべてのドロップダウンメニューが表示されます。クリックすると1つだけ表示されます。ドロップダウンメニューが表示されない？

非表示にするには、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>

唯一の第一は、Webページに表示されます。なぜ誰が知っていますか？

出典

2012-02-05 user1188711

javascript！= java – Jasper

ここで、 'id = radio1'の' HTML'はどこですか？ – xandercoded

あなたのコードにradio1とradio2のような項目はありますか？ –

id属性は一意であると考えられます。つまり、2つの要素が同じIDを持つ必要はありません。同じIDを持つ2つ（またはそれ以上）の要素がある場合は、document.getElementById() methodが最初に返す可能性があります。動作はブラウザによって異なりますが、いずれの場合も1つの要素または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()が複数...

EDIT、私が手に「要素」を言及した他の2つの方法が、「要素」、単数形であることに注意してください：私の謝罪、私はIEがするまで.getElementsByClassName()をサポートしないと思いますIE8を使用している場合は、上記の関数を次の行に置き換えることができます：

残りはそのまま動作するはずです。ここで私はIE8での作業としてテストしてみたデモは次のとおりです。http://jsfiddle.net/CVS2F/1/代わりにあなたはあなただけ.getElementsByTagName("div")を使用することができ.querySelectorAll()を使用することはできませんし、その後ループテスト内の各返された要素がどうかを確認するためにも、古いIEのバージョンをサポートするための

あなたが気にするクラスがあります。このように動作する更新されたデモがあります：http://jsfiddle.net/CVS2F/2/

出典

2012-02-05 03:13:14 nnnnnn

投稿を編集しました。改訂されたコードを使用することはできますか？それとも、あなたのコードを使用する方が良いでしょうか？ – user1188711

あなたの投稿に投稿を再編集しました。しかし、それはまだ動作しません。それが「はい」または「いいえ」であるかどうかは表示されません。どうもありがとうございます – user1188711

私の謝罪、私はIEには 'がないことを忘れていました。getElementsByClassName（） 'をバージョン9まで使用しているため、使用しているブラウザーについて言及していませんが、おそらくそれが間違っていて、いずれの場合でも古いバージョンをサポートする必要があります。だから私は2つの他のオプションで私の答えを更新しました。（ちょっと脇に：私はfor..inループは、配列のようなオブジェクトにアクセスすることをお勧めしません、私の答えに示されている従来のfor文を使用してください。場合によっては見つけにくいバグになることがあります）。 – nnnnnn

すべての混乱を解消するために、私は以下のテスト用の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で動作しません:( –

私はIEを使用していません。デバッグしようとしたのですか？ –

1.私はIEを使用していないので、他の人は使ってはいけないとは限りません。あなたが作成したものは、すべてのブラウザーで働く必要があります... 2. IEで働いていないのは、あなたがそれをコード化したように働いていない理由を確認する必要があります... –

ドロップダウンメニューが表示されない？

答えて

関連する問題