jquery to hide form depending on select field

I have an HTML form with multiple select fields... I want to display/hide a div based on a user's selection of a previous field. Specifically, if a user selects "Before" or "After" on the select field, I want to hide the #Length-div... the odd thing is that I have already gotten this to work for the #Yes div, and I don't know what the difference is between these two.


$(document).ready(function(){
$("#recurring").change(function(){ $(this).find("option:selected").each(function(){ var optionValue = $(this).attr("value"); if(optionValue=="No"){ $("#Yes").hide() } else{ $("#Yes").show(); } }) }); $("#before_after").change(function(){ debugger $(this).find("option:selected").each(function(){ var optionValue2 = $(this).attr("value"); if(optionValue2=="Until the prayer after"){ $("#Length-div").show(); } else{ $("#Length-div").hide(); } }) }); });


<div class="required"><label class="control-label" for="before_after">When?</label> <select class="form-control" id="before_after" name="before_after" required=""> <option selected="" value="Until the prayer after">Until the prayer after</option> <option value="Before">Before</option> <option value="After">After</option> </select></div> <div class="form-group required"><label class="control-label" for="recurring">Recurring</label> <select class="form-control" id="recurring" name="recurring" required=""> <option selected="" value="No">No</option> <option value="Yes">Yes</option> </select></div> <div name="Length-div" id="Length-div" style="display:none;"> {{ wtf.form_field(form.length)}}</div> <div name="Yes" id="Yes" style="display: none;"> {{ wtf.form_field(form.frequency)}} {{ wtf.form_field(form.end)}} </div>