根据 Select 语句选项隐藏一类 Div

Question

我对 javascript 相当陌生，我正在尝试为我的网站制作一个表单，但我被困在 javascript 上， 这就是我所拥有的：

<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 函数，但根据互联网，它与所有主要浏览器兼容。 感谢您的宝贵时间

Answer 1

getElementsByClassName 返回一个数组，您必须对结果进行迭代。并注意测试中的=（而不是==）。

但我建议你看看jquery。您的生活会更轻松，因为您可以按照以下方式完成：

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

（见小提琴：http://jsfiddle.net/dystroy/2GmZ3/）