refactor javascript - show and hide fields based on current selection
I will give you a sample which is very simplified. I hope you can understand what I am doing here. 

HTML

&lt;select class="toggle-data"&gt;
    &lt;option&gt;&lt;/option&gt;
    &lt;option value="1" data-toggle="#foo-one"&gt;foo one&lt;/option&gt;
    &lt;option value="2" data-toggle="#foo-two"&gt;foo two&lt;/option&gt;
&lt;/select&gt;

&lt;div id="foo-one" style="display: none;"&gt;
    foo one
&lt;/div&gt;

&lt;div id="foo-two" style="display: none;"&gt;
    foo two
&lt;/div&gt;


​
JS/jQuery

$('.toggle-data').on('change', function() {
    var toggle = this.options[this.selectedIndex].getAttribute('data-toggle'),
        toggle_class = 'unique_classname';
    $('.'+toggle_class+', '+toggle).toggle().removeClass(toggle_class);
    $(toggle).addClass(toggle_class);
});
​


Now you have a single function to do all of your show/hiding and you would just format you html accordingly.