Show/hide elements based on a selected option with javascript

Question

I\'m currently working on a website (I\'m new to HTML, CSS, JavaScript and I haven\'t worked with JQuery) and I made a form in which users can select the type of candy they

Answer 1

Using jQuery is pretty simple to do this.

Your filter:

  All
  Candy
  No candy

The table of contents:

  

    
Candy 1
  
  

    
Candy 2
  
  

    
No candy here
  
  

    
Candy 3
  
  

    
No candy here too
  

Note that each table TR has a class to identify its type. If has a candy or has not.

On Javascript you just do like this:

$(function() { // On page ready
    $('select').change(function() { // On change this select
    var _this = $(this);
    if ( _this.val() == 0 )
        $('tr').show(); // Will show all lines
    else {
        $('tr').hide(); // Will hide all lines
        $('tr.' + _this.val()).show(); // Will show only selected lines
    }
  });
});

You can see this working on this Fiddle I did for you.