Скрытие класса Div в зависимости от опции выбора предложения

Question

Я довольно новичок в javascript, и я пытаюсь создать форму для своего сайта, и я застрял на javascript, Это то, что у меня есть:

То, что я предназначил для выполнения сценария, это получить переменную (выбранную пользователем), а затем показать все элементы с классом с тем же именем (так что если бы была выбрана опция orc div 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> 

К сожалению, ничего не происходит, когда я изменяю содержимое вида combobox (я пытался использовать несколько браузеров) Что я делаю неправильно? Я понимаю, что getElementsByClassName() - это функция HTML5, но в соответствии с interwebs она совместима со всеми основными браузерами. Спасибо за ваше время

Answer 1

getElementsByClassNamegetElementsByClassName возвращает массив, вы должны перебирать результат. И будьте осторожны с = в тестах (вместо ==).

Но я предлагаю вам взглянуть на jquery. Ваша жизнь будет проще, так как то, что вы хотите, может быть сделана как:

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

(см скрипки: http://jsfiddle.net/dystroy/2GmZ3/)