Question

I need a snippet of code for creating an “other” dropdown option. Basically, if there are 3 options for color: red|green|blue, I want them to have the ability to select other and when selected a div appears with a textbox for them to enter the next color. Posting code now….sorry people. Here is what I have tried so far:

<label class="desc">
                                    Operating System:
                                </label>
                                <div><select name="os" id="os"><option value="1" selected = "selected">Windows 98</option>

Windows ME
Create New

<script type="text/javascript">
$(document).ready(function(){
  $('#os').change(function(){
    if($(this).val() == 'other')
      $('#otheros').show();
    else
      $('#otheros').hide();
  });
});
</script>

Answer 1

here is a code snippet and here is the demo

#otherOption
{
    display:none;
    margin-left:5px;
}

<select id='ddlColors'>
    <option value = 'red'>red</option>
    <option value = 'blue'>blue</option>
    <option value = 'other'>other</option>
</select>
<div id='otherOption'>
    <input type='text' />
</div>

    $(document).ready(function(){
    $('#ddlColors').change(function(){
        if($(this).val() == 'other')
            $('#otherOption').show();
        else
            $('#otherOption').hide();
    });
});​