Javascript 更改下拉列表问题的内容

我想要一个下拉菜单，如果我选择

value1

我会得到几个输入字段，如果我选择

value2

我会得到一些其他输入字段。所以我在网上找到了这段代码，我正试图根据我的需要调整它。不幸的是，它不起作用，表格总是显示出来。如果我不使用表（纯文本），代码就可以工作

Javascript

<script type='text/javascript' src='http://jsfiddle.net/js/lib/mootools-core-1.4.5-nocompat.js'></script>
<script type='text/javascript'> 

function showForm(id) {
    document.getElementById('submitForm').style.display = "block";
    if (id == 0) {
        document.getElementById('submitForm').style.display = "none";
    }
    for (var i = 1; i < 4; i++) {
        if (i == id) {
            document.getElementById(i).style.display = 'block';
        } else {
            document.getElementById(i).style.display = 'none';
        }
    }
}
</script>

函数显示窗体（id）{
document.getElementById（'submitForm'）.style.display=“block”；
如果（id==0）{
document.getElementById（'submitForm'）.style.display=“无”；
}
对于（变量i=1；i<4；i++）{
如果（i==id）{
document.getElementById（i）.style.display='block'；
}否则{
document.getElementById（i）.style.display='none'；
}
}
}

HTML

<table>
        <tr>
            <td>Selecteer uw materiaal: </td>
            <td>
            <select id="dropdownMenu" name="dropdownMenu" onchange="javascript: showForm(document.getElementById('dropdownMenu').value);">
                <option value="0">Choose an option</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Other</option>
            </select></td>
        </tr>
    <div id="1" style="display: none;">
    <tr>
        <td>Aantal videobanden: </td>
        <td><input type="text" name="aantalVideo" value="" /></td>
    </tr>
    <tr>
        <td>Geschatte speelduur (in minuten): </td>
        <td><input type="text" name="duurVideo" value="" /></td>
    </tr>
    </div><!-- /1 -->
    <div id="2" style="display: none;">
    <tr>
        <td>Aantal spoelen: </td>
        <td><input type="text" name="aantalSpoelen" value="" /></td>
    </tr>
    <tr>
        <td>Geschatte speelduur (in minuten): </td>
        <td><input type="text" name="duurSpoelen" value="" /></td>
    </tr>       
    </div><!-- /2 -->
    <div id="3" style="display: none;">
    <tr>
        <td>&nbsp;</td>
        <td>Overig</td>
    </tr>
    </div><!-- /3 -->
    <div id="submitForm" style="display: none;">
    <tr>
        <td>&nbsp;</td>
        <td><input value=" Order aanmaken " type="submit"></td>
    </tr>
    </div><!-- /submitForm -->
    </table>

选择所有uw材料：
选择一个选项
选择1
选择2
其他
安塔尔电视台：
Geschatte speelduur（分钟）：
安塔尔斯波伦：
Geschatte speelduur（分钟）：
过量

为什么不将这些id赋予tr元素，而不是创建div。我试着改变一些页面结构。成功了。我将给定给div元素的id分配给了其中的tr元素，并且成功了。

您愿意使用jquery吗？