Show hide elements based on ID from select dropdown javascript

Question

I know this is proboly the most asked question out there but I have scoured the net and tried several examples and none of them have worked. Here is my issue.

First I have no control over the TR TD structure, can't use DIV.

I need to be able to display certain TD's based on the select dropdown menu value. I have 4 different id's I am using "to", "to_field", "from", "from_field". The script I have shown is not working. Can someone help me out?

Example: If someone selects "In Use" in the dropdown then I just want all the elementID that have "from" and "from_field" to display only. If someone selects a different value then I would like to change that around.

        <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>

Answer 1

    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';
        }
    }