Показать скрытый набор полей после выбора варианта выпадающего списка с помощью jQuery

Question

Целью здесь является скрыть поле «Чемпионат штата», если в раскрывающемся списке не выбрано «Чемпионат штата». Это работает в jSFiddle, но по какой-то причине он не работает на живой странице.

Пожалуйста, помогите.

Соответствующий CSS/JS код:

<style type="text/css"> 
    #state-championships-1409369394 { 
    display:none 
    } 
</style> 

<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){ 
$(document).ready(function() { 
    $('#DROPDOWN_21-3-0-1').on('change', function() { 
     if (this.value == 'State Championships') { 
      $("#state-championships-1409369394").show(); 
     } else { 
      $("#state-championships-1409369394").hide(); 
     } 
    }); 
}); 
});//]]> 
</script> 

Соответствующий HTML код

<select name="DROPDOWN_21" title="Must choose an event to register for." class="required ee-reg-page-questions DROPDOWN_21 valid" id="DROPDOWN_21-3-0-1"> 
    <option value="">Select One</option> 
    <option value="Main Event">Main Event</option> 
    <option value="State Championships">State Championships</option> 
</select> 

<fieldset class="event_questions" id="state-championships-1409369394"> 
    <h4 class="reg-quest-title section-title">State Championships</h4> 
    <div class="event_form_field"> 
     <label for="TEXT_18" class="ee-reg-page-questions">Qualifying Total</label> 
     <input type="text" class="ee-reg-page-questions ee-reg-page-text-input TEXT_18" id="TEXT_18-3-0-1" name="TEXT_18" value=""> 
    </div> 
    <div class="event_form_field"> 
     <label for="TEXT_19" class="ee-reg-page-questions">Event Name for Qualifying Ttoal</label> 
     <input type="text" class="ee-reg-page-questions ee-reg-page-text-input TEXT_19" id="TEXT_19-3-0-1" name="TEXT_19" value=""> 
    </div> 
    <div class="event_form_field event-quest-group-textarea"> 
     <label for="TEXTAREA_20" class="ee-reg-page-questions">Date of Event</label> 
     <textarea class="ee-reg-page-questions ee-reg-page-text-input TEXTAREA_20" id="TEXTAREA_20-3-0-1" name="TEXTAREA_20" rows="5"></textarea> 
    </div> 
</fieldset> 

Ссылка на JSFiddle:http://jsfiddle.net/v4gNL/100/
Ссылка на живой сайт:http://bit.ly/1qeet9A

Answer 1

Использование JQuery вместо $:

jQuery('#DROPDOWN_21-3-0-1').on('change', function() { 
     if (this.value == 'State Championships') { 
      jQuery("#state-championships-1409369394").show(); 
     } else { 
      jQuery("#state-championships-1409369394").hide(); 
     } 
    }); 

Вы можете запустить выше скрипт в консоли и проверьте.