Выпадающее меню, которое создает поле ввода

Question

Что бы я хотел, чтобы произойти, когда кто-то выбирает коммерческий вариант, под ним появляется надпись электронной почты. Это код, у меня есть:

<div class="field-widget"> 
<select id="field7" name="field227" class="validate-selection" 
title="What Type Of Vehicle Is This"> 
<option >Select one...</option> 
<option value="Commercial">Commercial</option> 
<option value="Passenger">Passenger</option> 

</select> 
<div id="email-signup1" class="form-row" style="display:none;"> 
<div class="field-label"><label for="field22">Email</label>:</div> 
<div class="field-widget"><input name="field22" id="field22" 

class="required validate-email" title="Optional: Enter your email address" /></div> 
</div> 

Answer 1

Вот как вы можете сделать это с чистым JavaScript: http://jsfiddle.net/dfj8u/3/

HTML

<div class="field-widget"> 

    <select id="field7" name="field227" class="validate-selection" 
    title="What Type Of Vehicle Is This"> 
     <option >Select one...</option> 
     <option value="Commercial">Commercial</option> 
     <option value="Passenger">Passenger</option> 
    </select> 

    <div id="email-signup1" class="form-row" style="display:none;"> 
     <div class="field-label"><label for="field22">Email</label>:</div> 
     <div class="field-widget"><input name="field22" id="field22" class="required validate-email" title="Optional: Enter your email address" /> 
     <br /><input type="button" id="closeButton" value="Close" /> 
    </div> 

</div> 

CSS

.form-row { 
    width: 200px; 
    background: gray; 
    border: 1px solid black; 
} 

JS

(function() { 

    var select = document.getElementById('field7'), 
     closeButton = document.getElementById('closeButton'); 

    function addHandler(el, event, handler) { 
     if (el.addEventListener) { 
      el.addEventListener (event, handler, false); 
     } else if (el.attachEvent) { 
      el.attachEvent (event, handler); 
     } 
    } 

    addHandler(select, 'change', inputChanged); 
    addHandler(closeButton, 'click', hideForm); 

    function inputChanged(event) { 
     if (this.value === 'Commercial') { 
      showForm(); 
     } 
    } 

    function showForm() { 
     var form = document.getElementById('email-signup1'); 
     form.style.display = 'block'; 
    } 

    function hideForm() { 
     var form = document.getElementById('email-signup1'); 
     form.style.display = 'none'; 
    } 

}()); 

С наилучшими пожеланиями.