Select 문 옵션에 따라 Div 클래스를 숨 깁니다.

저는 자바 스크립트에 상당히 익숙하며 웹 사이트에 대한 양식을 만들려고하고 있습니다. 자바 스크립트에 붙어 있습니다. 이것은 내가 가지고있는 것입니다 :Select 문 옵션에 따라 Div 클래스를 숨 깁니다.

<script type="text/javascript"> 
function hide(opt) { 
if (getElementsByClassName(opt).style.display='none';){ 
getElementsByClassName(opt).style.display='block'; 
} 
else{ 
getElementsByClassName(opt).style.display='none'; 
    } 
} 
</script>

스크립트가 의도 한 것은 변수 (사용자가 선택한 옵션)를 수신 한 다음 동일한 이름의 클래스로 모든 요소를 표시하는 것이 었습니다 (옵션이 orc 인 경우 orc div가 표시됨). 선택한 옵션이 엘프 등 인 경우 만 HTML) 숨길 수 :

<form name="chargen" action="" method="post"> 
Name:<Input name="name" type="text" /> 

Gender:<select name="gender"> 
<option>Choose Gender...</option> 
<option>Male</option> 
<option>Female</option> 
</select> 

Species:<select name="species" onchange="hide(document.chargen.species.options[ 
document.chargen.species.selectedIndex ].value)"> 
<option> Choose Species...</option> 
<option value="human">Human</option> 
<option value="orc">Orc</option> 
<option value="elf">Elf</option> 
<option value="dwarf">Dwarf</option> 
<option value="drow">Drow</option> 
<option value="ent">Ent</option> 
</select> 

<div class="human" style="display:none;"> 
Sub Species:<select name="subspecies1"> 
<option>Norseman</option> 
<option>Hellenic</option> 
<option>Heartlander</option> 
</select> 
</div> 

<div class="orc" style="display:none;"> 
Sub Species:<select name="subspecies2"> 
<option>Black Orc</option> 
<option>Fel Orc</option> 
<option>Green Orc</option> 
</select> 
</div> 

<div class="human" style="display:none;"> 
Homeland:<select name="homeland1"> 
<option>Choose Homeland...</option> 
<option value="citadel">Citadel</option> 
<option value="wildharn">Wildharn</option> 
<option value="Merith">Merith</option> 
</select> 
</div> 

<div class="orc" style="display:none;"> 
Homeland:<select name="homeland2"> 
<option>Choose Homeland...</option> 
<option value="1">Berherak</option> 
<option value="2">Vasberan</option> 
</select> 
</div>

불행히도 종 콤보 박스의 내용을 변경하면 아무 일도 일어나지 않습니다 (여러 브라우저에서 시도했습니다). 내가 뭘 잘못하고 있니? getElementsByClassName()은 HTML5 함수라는 것을 알고 있지만 interwebs에 따르면 모든 주요 브라우저와 호환됩니다. 시간 내 주셔서 감사합니다.

출처

2012-06-19 Maverick Jones

getElementsByClassName은 결과를 반복해야합니다. 그리고 == 대신에 = 테스트에 유의하십시오.

하지만 jquery을 살펴 보시기 바랍니다.

이

$('.human, .orc, .elf, .dwarf, .drow, .ent').hide(); 
$('.'+opt).show();

(바이올린 참조 : http://jsfiddle.net/dystroy/2GmZ3/) 당신이 원하는하는 것은으로 할 수있는, 여러분의 인생을 더 쉽게 될 것입니다

출처

2012-06-19 07:53:09

내 페이지에 jQuery를 추가하고 실행을 그 숨기기 기능 (대신에 다른 모든 것들의) 내부 그것은 아무 효과가 없었습니다 :/ –

정확한 코드를 테스트하고 공유하기 위해 [fiddle] (http://jsfiddle.net)을 만들 수 있습니까? –

okies :) 여기 있습니다 : http://jsfiddle.net/rQTbb/ –

Select 문 옵션에 따라 Div 클래스를 숨 깁니다.

답변

관련 문제