根据选择下拉列表 javascript 中的 ID 显示隐藏元素

我知道这可能是最常被问到的问题，但我已经搜索了网络并尝试了几个例子，但没有一个起作用。这是我的问题。

首先我无法控制TR TD结构，无法使用DIV。

我需要能够根据选择的下拉菜单值显示某些 TD。我有 4 个不同的 id，我使用“to”、“to_field”、“from”、“from_field”。我展示的脚本不起作用。有人可以帮我吗？

示例：如果有人在下拉列表中选择“使用中”，那么我只想显示所有具有“from”和“from_field”的 elementID。如果有人选择不同的值，那么我想改变它。

        <script type="text/javascript">
        function showstuff(element){
            document.getElementById("from").style.display = element=="in_use"?"visibility":"visible";
            document.getElementById("to").style.display = element=="in_use"?"visibility":"hidden";
            document.getElementById("from_field").style.display = element=="in_use"?"visibility":"visible";
            document.getElementById("to_field").style.display = element=="in_use"?"visibility":"hidden";

            document.getElementById("from").style.display = element=="relocated"?"visibility":"visible";
            document.getElementById("to").style.display = element=="relocated"?"visibility":"visible";
            document.getElementById("from_field").style.display = element=="relocated"?"visibility":"visible";
            document.getElementById("to_field").style.display = element=="relocated"?"visibility":"visible";
        }
        </script>
        <table>
            <tr>
                <td><h2>Add/Edit Parts</h2></td>
            </tr>
        </table>
        <form action="includes/inventory_parts.php" method="post" name="myform">
        <table cellpadding="10" style="border:solid 1px #000000">
            <tr>
                <td colspan="20"><h3>Add New Part</h3></td>
            </tr>
            <tr>
                <td style="font-weight:bold">Printer Man Part#</td>
                <td style="font-weight:bold">Part#</td>
                <td style="font-weight:bold">Title</td>
                <td style="font-weight:bold">Serial#</td>
                <td style="font-weight:bold">Status</td>
                <td id="from" style="font-weight:bold;visibility:hidden">From Printer Serial#</td>
                <td id="to" style="font-weight:bold;visibility:hidden;">To Printer Serial#</td>
                <td style="font-weight:bold">Submit</td>
            </tr>
            <tr>
                <td><input type="text" name="printer_man_part_number" /></td>
                <td><input type="text" name="part_number" /></td>
                <td><input type="text" name="title" /></td>
                <td><input type="text" name="this_part_serial_number" /></td>
                <td>
                <select name="status" onchange="showstuff(this.value);">
                    <option></option>
                    <option value="in_use">In Use</option>
                    <option value="relocated">Relocated</option>
                    <option value="disposed">Disposed</option>
                    <option value="selling">Selling</option>
                </select>
                </td>
                <td id="from_field"><input type="text" name="from" style="visibility:hidden" /></td>
                <td id="to_field"><input type="text" name="to" style="visibility:hidden" /></td>
                <td><input type="submit" name="submit" value="Add Part" /></td>
            </tr>
        </table>
        </form>

    function showstuff(element) {
        // first hide everything
        document.getElementById("from").style.visibility = 'hidden';
        document.getElementById("to").style.visibility = 'hidden';
        document.getElementById("from_field").style.visibility = 'hidden';
        document.getElementById("to_field").style.visibility = 'hidden';
        var targets;
        // select the IDs that should be unhidden based on element
        switch (element) {
          case 'in_use': targets = ['from', 'from_field']; break;
          case 'relocated': targets = ['to', 'to_field']; break;
          ...
        }
        // now unhide the selected IDs.
        for (var i = 0; i < targets.length; i++) {
          document.getElementById(targets[i]).style.visibility = 'visible';
        }
    }