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

您可以在控制台中运行上面的脚本并检查。