HTML form show fields depending on drop down selected

Question

Having an issue here. Trying to make certain fields appear depending on what has been selected in a drop down box. I"ve had a look on stack and have tried editing the code here: http://jsfiddle.net/tarleton/p8ARq/15/ to work with mine. I cannot seem to get it to work...total newbie here so any help appreciated.

$("select").change(function () {
    // hide all optional elements
    $('.optional').css('display','none');

    $("select option:selected").each(function () {
        if($(this).name() == "test") {
            $('.test').css('display','block');
        } else if($(this).val() == "test2") {
            $('.test2').css('display','block');
        }
    });
});

HTML:

<form class="contact" name="contact" action="#" method="post">
       <div id="styled-select">
           <select>
            <option name="test" value="Option 1" >Referral</option>
              <option name="test2"value="Option 2">Other</option>
              </select>
       </div>
          <input class="optional test" name="revealtest" style="display:none;" class="hidden-txt">

       <input class="optional other" name="revealtest2" value="" style="display:none;" class="hidden-txt">

</form>

Answer 1

There is not .name for jQuery.

You can use .attr()

if($(this).attr('name')

and class can be applied to div or other tag.

so specify what to select as below,

$('input.test2').css('display','block'); 
$('input.test').css('display','block');

Also wrap all class inside single class attribute and also remove inline style because in jQuery you are also doing hiding using .hide().