Add input-box when selecting a specific option into select drop down

html, input, javascript, jquery, select

Solution

You can use jquery `.change()` to bind change event of an element.

Try this one:

HTML

<select>
  <option>Choose Your Name</option>
  <option>Frank</option>
  <option>George</option>
  <option>Other</option>
</select>
<label style="display:none;">Enter your Name
<input></input>
</label>

Jquery

$('select').change(function(){
     if($('select option:selected').text() == "Other"){
        $('label').show();
     }
     else{
        $('label').hide();
     }
 });

Try in Fiddle

Updated:

You can also add an input-box dynamically -

HTML

<select>
  <option>Choose Your Name</option>
  <option>Frank</option>
  <option>George</option>
  <option>Other</option>
</select>

Jquery

$('select').change(function(){
   if($('select option:selected').text() == "Other"){
        $('html select').after("<label>Enter your Name<input></input></label>");
   }
   else{
        $('label').remove();
   }
});

Try in Fiddle

Problem

I need to add input to a select option when it is selected. Whenever the user selects 'other' an input box is there for the user to enter in data. HTML: ``` <select> <option>Choose Your Name</option> <option>Frank</option> <option>George</option> <option>Other</option> </select> <!-- when other is selected add input <label>Enter your Name <input></input> </label> --> ``` My jsfiddle: http://jsfiddle.net/rynslmns/CxhGG/1/

Original source