드롭 다운 메뉴가 표시되지 않습니까?

두 메뉴 모두 'name'= list1이있는 두 개의 드롭 다운 메뉴가 있습니다. 나는 또한 2 개의 라디오 버튼 'yes'또는 'no'를 가지고있다. '모두'를 선택하지 않으면 모든 드롭 다운 메뉴가 숨겨져 있어야합니다. '예'를 선택하면 모든 드롭 다운 메뉴가 표시됩니다. 클릭 할 때 하나만 표시됩니다. 예 아니오.드롭 다운 메뉴가 표시되지 않습니까?

자바 스크립트 코드를 숨길 수 : 1 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>

코드 : 아래 2 드롭에 대한

<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

자바 스크립트! = java – Jasper

여기서 'id = radio1'에 대한'HTML '은 무엇입니까? – xandercoded

코드에서 radio1 및 radio2와 같은 항목은 어디에 있습니까? –

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()입니다. 다른 두 가지 방법 내가 GET "요소"를 언급하면서

공지 사항 .getElementById() 그게 ..., "요소", 단수

편집 복수입니다 :, 내가 IE 때까지 .getElementsByClassName()을 지원 나의 사과를 생각하지 않는다 IE8을 사용하는 경우 위의 함수 대신 다음 줄을 사용할 수 있습니다.

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

나머지는 그대로 작동해야합니다. 여기에 내가 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까지 사용하기 때문에 어떤 브라우저를 사용하고 있는지 언급하지는 않았지만 어쩌면 잘못된 일이 될 수 있으며 어떤 경우에는 이전 버전을 지원해야 할 가능성이 큽니다. 그래서 나는 다른 두 가지 옵션으로 나의 대답을 업데이트했다. (그냥 제쳐두고 : 나는 for..in 루프를 사용하여 배열과 같은 객체에 액세스하지 않는 것이 좋습니다. 내 대답과 같이 for 문을 사용하여 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에서 일하는 것이 왜 저에게는 문제가되지 않습니까. .. 당신은 그것을 코딩 했으므로 왜 작동하지 않는지 확인해야합니다 ... –

드롭 다운 메뉴가 표시되지 않습니까?

답변

관련 문제