CODEWITHSUNDEEP
javascriptjqueryselecthide
Hongxuan
Hongxuan

Reputation: 117

Hide/Display tables after selecting different options

I have 2 tables "iu" and "si" and I put a dropdown list for users to select which one they want to see. Once the option is selected, the corresponding table will appear.

Another one is supposed to be hidden but when the page is loaded, default table "si" is shown.

Here is my JavaScript code:

<script>
     $(document).ready(function()
    {
        $('#iu_table').hide();
    });
    $('#iu').onchange=function()
    {
        $('#si_table').hide();
        $('#iu_table').toggle();
    }
</script>

And HTML code:

<select> 
        <option id="si" selected>SI</option> 
        <option id="iu">IU</option> 
    </select>

The table ID is "si_table" and "ui_table" respectively.

I used the code above but it doesn't work. No matter which one I select, only the "si" table is shown.

I hope that someone could help.

Upvotes: 0

Views: 1907

Answers (3)

Ayyappan Sekar
Ayyappan Sekar

Reputation: 11475

There is a method in jQuery which does hide/show matched elements called toggle() As you need to hide the IU table at first, you may need some css trick for that. So put display:none; for the IU table and do toggle on changing the dropdown values. Working fiddle is here

Upvotes: 1

Silahe
Silahe

Reputation: 56

You should probably work with the Tutorials of jQuery and familarize yourself with the workings of the libraries.

There are multiple errors in your code:

  • There is no field onchange. What you want is the change function of jQuery, which is described here: http://api.jquery.com/change/
  • The code for the change function belongs into the $(document).ready function, so jquery executes it, when the document is loaded. The code has to be executed there, so that the function is called when the select is changed.
  • You want to work with the change of the select not with the change of the option.
  • In the body of your change function you hide the one table and toggle other: toggle both, so the first can be shown too, when the option is selected. Also this construct only works for exactly 2 options. If you want more options, you have to work something out like in the answer of Paritosh.

Here is a working sample:

<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
     $(document).ready(function()
    {
        $('#iu_table').hide();
        $('#selector').change(function()
            {
                $('#si_table').toggle();
                $('#iu_table').toggle();
            });
    });

</script>
</head>
<body>
<div id="si_table">si</div>
<div id="iu_table">iu</div>
 <select id="selector"> 
        <option id="si" selected="selected">SI</option> 
        <option id="iu">IU</option> 
 </select>
</body>

Upvotes: 1

Paritosh
Paritosh

Reputation: 11568

There are many ways of achieving this. One is below - I have added id attribute to dropdown control

<select id="myselection"> 
    <option id="si" selected>SI</option> 
    <option id="iu">IU</option> 
</select>

<script>
$('#myselection').bind('change', function(){
    if($('#myselection option:selected').attr('id') == "si"){
       $('#si_table').show();
       $('#iu_table').hide();
    }
    else if($('#myselection option:selected').attr('id') == "iu"){
       $('#si_table').hide();
       $('#iu_table').show();
    }
});
</script>

Upvotes: 1

Related Questions