0

我想让所有结果一直隐藏，只显示与下拉列表中选择的选项相对应的结果。我拥有的代码运行良好，但正如您所看到的，此代码首先显示所有结果，我似乎无法让它先隐藏所有结果，然后只显示一个。

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

2 回答 2

2

你试过$("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>

...

于 2013-07-02T17:49:37.710 回答
1

两种选择：

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

或使用 CSS：

#result td {
    display: none;
}
于 2013-07-02T17:51:47.310 回答