how to show textarea based on select dropdown using jquery?

Question

i want to display 2x dropdown menus both will be pre populated (2nd menu "mainToon" will contain over 200 names but for the example i have shown just a few.

<select id="category" name="Category">
    <option value=" "></option>
    <option value=" ">-----------------</option>
    <option value="Main Toon">Main Toon</option>
    <option value="Alt Toon">Alt Toon</option>
    <option value="Cyno Toon">Cyno Toon</option>
    <option value="Super Toon">Super Toon</option>
    <option value="Dust Toon">Dust Toon</option>
</select>

<select id="mainToon" name="mainToon">
    <option value=" "></option>
    <option value=" ">-----------------</option>
    <option value="Agmar">Agmar</option>
    <option value="S Tein">S Tein</option>
    <option value="Karades">Karades</option>
    <option value="Bad Kharma">Bad Kharma</option>
    <option value="Ed jeni">Ed Jeni</option>
</select>

by default the first dropdown will show blank and i want the "mainToon" dropdown to be hidden untill any of the following are selected:

"Alt Toon", "Cyno Toon", "Super Toon", "Dust Toon"

Then the form will be visable.

Can i do this by applying a .hidden css code to the dropdown and changing the class dynamically when other options are selected?

many thanks for the help.

Answer 1

First hide your dropdown :-

<select id="mainToon" name="mainToon" style="display:none;">
</select>

And use Jquery show hide function like this :-

$(document).ready(function(){
    $("#category").change(function(){
       var value = $(this).val();
        if(value=="Alt Toon" || value=="Cyno Toon")
        {
            $("#mainToon").show();
        }
        else 
        {
           $("#mainToon").hide();
        }
    });
});

Answer 2

Below show the DEMO how to show DIV based on selection value ,

    $(function() {
    $('#colorselector').change(function(){
          $('.colors').hide();
          $('#' + $(this).val()).show();
      });
    });

And Here is working demo.