根据选择语句选项隐藏 Div 类

Hiding a class of Div depending on Select statement option

本文关键字：隐藏 Div 选项 语句 选择      更新时间：2023-09-26

我对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，则会显示 orcdiv，但如果选择的选项是 elf 等，则隐藏）。目录： 

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

getElementsByClassName返回一个数组，则必须迭代结果。并小心测试中的=（而不是==）。

但我建议你看看jquery。您的生活将更轻松，因为您想要的可以通过以下方式完成：

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

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

相关文章：