CODEWITHSUNDEEP
javascriptshowhiddenhtml-select
EliasPerez
EliasPerez

Reputation: 25

hidden rows change to show on javascript on dropdown selection

I want to make all the results hidden all the time and to only show the one that corresponds to the option selected on the dropdown list. The code that i have is working perfectly but as you can see this code shows all the results at first and i cant seem to get it to hide all the results first and then show only one.

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

Upvotes: 0

Views: 1612

Answers (2)

Amani
Amani

Reputation: 525

Two options:

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

OR using CSS:

#result td {
    display: none;
}

Upvotes: 1

andre.barata
andre.barata

Reputation: 663

Have you tryed calling $("td").hide(); after $("doucment").ready(function() {?

As such:

...

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

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

    })(jQuery);
</script>

...

Upvotes: 2

Related Questions