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函数，但根据interwebs它与所有主流浏览器兼容。谢谢你的时间

Answer 1

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

但我建议你看看jquery。你的生活将更容易，因为你想要的可以做到：

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

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

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

1 个答案: