Question

我知道这是最常见的问题，但是我已经在网上搜索了几个例子，但没有一个有效。这是我的问题。

首先我无法控制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>

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

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

1 个答案: