Question

我想让所有结果一直隐藏，只显示与下拉列表中选择的选项对应的结果。我拥有的代码工作正常，但你可以看到这段代码首先显示了所有的结果，我似乎无法先隐藏所有结果，然后只显示一个。

    <script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
    (function($) {
        $("doucment").ready(function() {

            $("#choice").change(function() {
                $("td").hide();
                $("td." + $(this).val()).show();
            });
        });

    })(jQuery);
</script>
</head>

<body>
    <select id="choice">
        <option value="d1">A</option>
        <option value="d2">B</option>
        <option value="d3">C</option>
        <option value="d4">D</option>
    </select>
    <table id="result" border="1">
        <tr>
            <td class="d1">Column A</td>
            <td class="d2">Column B</td>
            <td class="d3">Column C</td>
            <td class="d4">Column D</td>
        </tr>
    </table>

Answer 1

您是否尝试在$("td").hide();之后致电$("doucment").ready(function() {？

因此：

...

<script type="text/javascript">
    (function($) {
        $("doucment").ready(function() {
            $("td").hide();

            $("#choice").change(function() {
                $("td").hide();
                $("td." + $(this).val()).show();
            });
        });

    })(jQuery);
</script>

...

Answer 2

两个选项：

$(doucment).ready(function() {
    $('#result td').hide(0);
    ...

或使用CSS：

#result td {
    display: none;
}

隐藏行更改为在下拉列表选择的javascript上显示

2 个答案: