hide show input field based on select option value chosen

hide show input field based on select option value chosen

Hello all,

I hope that I am in the right area for this post.

I am trying to use jquery based on a user select list.  When a user chooses the "other" option they should be able to input a new selection value.  The input put box is not being hidden even though other has not been chosen.

Anyway, here is the code that I have put together.

TIA,
Peter













  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EL" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="el" xml:lang="el">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" >
    // for hide - display field based on select
    $(document).ready(function() {
      $.viewInput = {
        'other' : $([]),
        //THIS IS THE NAME OF THE DIV WRAPPING THE HIDDEN FIELD
        'otherField' : $('#otherField'),
      };

    $('#101').change(function() {
        // HIDES THE INPUT FIELD IF ANOTHER DROPDOWN ITEM IS SELECTED ONCE THE HIDDEN FIELD IS LOADED
        $.each($.viewInput, function() { this.hide(); });
        // SHOWS THE INPUT FIELD ITEM IF SELECTED
        $.viewInput[$(this).val()].show();
      });

    });
    </script>

    </head>
    <body>

    <div id="101">

    <select id="101" name="101" class="dropdown" title="use <b>other</b> to add new item" >
    <option value=" ">Select feeling</option>
    <option value="Euphoric">Euphoric</option>
    <option value="Ecstatic">Ecstatic</option>
    <option value="Normal">Normal</option>
    <option value="Depressed">Depressed</option>
    <option value="Unhinged">Unhinged</option>
    <option value="Deranged">Deranged</option>
    <option value="other">Other...</option>
    </select>

    <div id="otherField">
        <input type="text" id="101" name="101" size="3" class="textfield" />
    </div>

    </div>

    </body>
    </html>