on select display textbox with jquery?

Question

Hi all, I'm sure this is super easy, but I can't seem to think what I'm doing wrong, anyway I have a "title" select list for my form, and I want to display a textbox if "Other" is selected.

<select name="title" id="title" class="required">
    <option value="" selected="selected">- Select Title -</option>
    <option value="Ms.">Ms.</option>
    <option value="Mrs.">Mrs.</option>
    <option value="Mr.">Mr.</option>
    <option value="Dr.">Dr.</option>
    <option value="Prof.">Prof.</option>
    <option value="Rev.">Rev.</option>
    <option value="Other" onclick="showOther();">Other</option>
</select>

function showOther() {
  jQuery("#otherTitle").show();
}

But that's not working.. the #otherTitle textbox is hidden using jquery when the page loads.

Answer 1

I would suggest a different approach:

$("#title").change(function() {
    if($(this).find("option:last").is(':selected')) {
        $("#otherTitle").show();
    } else {
        $("#otherTitle").hide();
    }
});

That is, if the last option is selected, show the textbox that goes by the ID otherTitle. I actually use this method. Hope that helps. Of course, your 'Other' field must always be last for this to work - plus it's rather handy for multilingual sites.

Answer 2

Bind an event to your select list, when its changed, look at the value and do your hiding / showing

$(function(){

    $("#title").change(function () {
        if ($(this).val() == 'Other') {
            $("#otherTitle").show();
        }
    });

});

Answer 3

$(function() {    
    $('#title').change(function() {
      if (this.value === "Other") {
        $("#otherTitle").show();
      }
      else {
        $("#otherTitle").hide();
      }     
    });    
});

and a Working Demo. add /edit to the url to see the code

Answer 4

1. Use jQuery to bind your event handlers instead of the "onfoo" element attributes
2. You're better off binding the handler to the "select" element, because there are ways in which the option can be selected that won't involve a "click" event:

(some text to make stackoverflow show the code block below)

$(function() {
  $('#title').change(function() {
    if ($(this).val() == 'Other')
      $('#otherTitle').show();
    else
      $('#otherTitle').hide();
  });
});

I'd prefer to give the "Other" option an "id" value rather than relying on the "value", but whatever.