Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Show a Textbox When an Option is Selected

I have the following code:

<select>
<option value="Type 1">Type 1</option>
<option value="Type 2">Type 2</option>
<option value="Type 3">Type 3</option>
<option value="Other">Other</option>
</select>

<input type="text" id="other" />

What I want to do is using jQuery make the textbox below hidden by default, and then show it if a user selects the other option from the dropdown.

like image 969
Cameron Avatar asked Mar 24 '10 11:03

Cameron


2 Answers

No need for any css here.

$('#sel').change(function() {
    var selected = $(this).val();
    if(selected == 'Other'){
      $('#other').show();
    }
    else{
      $('#other').hide();
    }
});
like image 108
Gabe Avatar answered Oct 10 '22 06:10

Gabe


<select id="sel">
<option value="Type 1">Type 1</option>
<option value="Type 2">Type 2</option>
<option value="Type 3">Type 3</option>
<option value="Other">Other</option>
</select>

<input type="text" id="other" style="display: none;" />

$('#sel').change(function() {
    $('#other').css('display', ($(this).val() == 'Other') ? 'block' : 'none');
});
like image 21
David Hedlund Avatar answered Oct 10 '22 08:10

David Hedlund