使用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(); 
     } 
    }); 

可以在控制台中运行上面的脚本和查询。