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.

Harshit Tailor · Accepted Answer · 2013-02-21 12:04:51Z

4

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();
        }
    });
});

edited Feb 21, 2013 at 12:04

answered Feb 21, 2013 at 11:55

Harshit Tailor

3,2816 gold badges30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sean Over a year ago

You are missing an '=' on value="Cyno Toon", should be if(value=="Alt Toon" || value=="Cyno Toon")

EnterJQ · Accepted Answer · 2013-02-21 11:56:47Z

1

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.

answered Feb 21, 2013 at 11:56

EnterJQ

1,0168 silver badges18 bronze badges

Collectives™ on Stack Overflow

how to show textarea based on select dropdown using jquery?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related