选择下拉项时，表单文本字段变为可见

Question

I need a text field inside a form that becomes visible only when a specified drop-down menu is chosen. To be clear, the text box becomes clear by selecting a specific drop-down menu, not by submitting the form. Ie, the page 'listens' for the a specific dropdown to be chosen and then through some methodology makes a text field visible for the user to fill in.

Answer 1

Basic elements in your form. Easiest way is to just use literal ID's for the fields.

<form... >

<select id="choices">
<option id="choose_me" value="foobar">blah</option>
<option id="whatever" value="whatever">blah</option>
</select>

<input id="show_me" name="whatever" type="text" value="I am hidden" style="display:none;" />
</form>

I prefer jQuery for all my javascript needs:

//jquery
$('#choices').live('change',function()
{
  if($('#choose_me').is(':selected'))
  {
    $('#show_me').show();
  }
  else
  {
    if($('#show_me').is(':visible'))
    {
      $('#show_me').hide();
    }
  }
});

Here's a working example: http://jsbin.com/eculot/edit

Answer 2

$('#selectBox').change(function() {
    var val=$('#selectBox').val();
    if(val=="value")
        $('#textbox').show();
});