JQuery Show Text Box When Option Selected

Question

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 use jQuery to put the text box below the hidden default and then show it if the user selects another option from the drop-down list.

Answer 1

No need for any css here.

 $('#sel').change(function() { var selected = $(this).val(); if(selected == 'Other'){ $('#other').show(); } else{ $('#other').hide(); } }); 

Answer 2

 <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'); }); 

Answer 3

Try the following:

 <select id="selectbox_id"> <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" /> 

JQuery

 $(function(){ // hide by default $('other').css('display', 'none'); $('selectbox_id').change(function(){ if ($(this).val() === 'Other') { $('other').css('display', 'block'); } }); });