jQuery根据选择字段隐藏表单

Question

我有一个带有多个选择字段的HTML表单。。。我想根据用户对上一个字段的选择来显示/隐藏div。具体地说，如果用户选择"；在"；或"；在"；在select字段上，我想隐藏#Length-div。。。奇怪的是，我已经为#Yesdiv工作了，我不知道这两者之间有什么区别。

<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>

我的Jquery脚本：

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script>
$(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();
}
}).change();
$("#before_after").change(function(){
$(this).find("option:selected").each(function(){
var optionValue2 = $(this).attr("value");
if(optionValue2=="Until the prayer after"){
$("#Length-div").show();
} else{
$("#Length-div").hide();
}

}).change();
});
});
});
</script>

你能告诉我为什么我的代码适用于#Yesdiv而不适用于#Lengthdiv吗？提前谢谢！

Answer 1

您的代码结构不正确，否则运行良好，请参阅下面的示例

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

})
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>