Javascript jQuery是否根据选择字段隐藏表单？

我有一个包含多个选择字段的HTML表单。。。我想根据用户对上一个字段的选择显示/隐藏div。 具体来说，如果用户在选择字段中选择“Before”或“After”，我想隐藏#Length-div。。。奇怪的是，我已经让它为“是”部门工作了，我不知道这两者之间有什么区别

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

什么时候
直到祈祷之后
之前
之后
再发生
不
对
{{wtf.form_字段（form.length）}
{{wtf.form_字段（form.frequency）}
{{wtf.form_字段（form.end）}

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

$（文档）.ready（函数（）{
$（“#重复”）.change（函数（）{
$（this）.find（“选项：选中”）.each（函数（）{
var optionValue=$（此）.attr（“值”）；
如果（选项值=“否”）{
$（“#是”）.hide（）
}否则{
$（“#是”）.show（）；
}
}).change（）；
$（“#前#后”）。更改（函数（）{
$（this）.find（“选项：选中”）.each（函数（）{
var optionValue2=$（此）.attr（“值”）；
如果（optionValue2==“直到祈祷结束”）{
$（“#长度div”）.show（）；
}否则{
$（“#长度div”）.hide（）；
}
}).change（）；
});
});
});

---

您能告诉我为什么我的代码适用于“是”div，但不适用于“长度”div吗？提前谢谢你

您的代码结构不正确，否则工作正常，请参见下面的示例

$（文档）.ready（函数（）{
$（“#重复”）.change（函数（）{
$（this）.find（“选项：选中”）.each（函数（）{
var optionValue=$（此）.attr（“值”）；
if（optionValue==“否”）{
$（“#是”）.hide（）
}否则{
$（“#是”）.show（）；
}
})
});
$（“#前#后”）。更改（函数（）{
调试器
$（this）.find（“选项：选中”）.each（函数（）{
var optionValue2=$（此）.attr（“值”）；
如果（optionValue2==“直到祈祷结束”）{
$（“#长度div”）.show（）；
}否则{
$（“#长度div”）.hide（）；
}
})
});
});

什么时候
直到祈祷之后
之前
之后
再发生
不
对
{{wtf.form_字段（form.length）}
{{wtf.form_字段（form.frequency）}
{{wtf.form_字段（form.end）}
因为您的代码结构不正确一些注意事项：要获取所选值，请使用
$（this）.val（）
您不需要使用所选属性迭代选项，也不需要查找value属性。还有…函数末尾的
.change（）
是怎么回事？请编辑您的问题，以包括如何显示问题的答案（例如，您说是代码工作-但是我们看不到，以查看区别）。i、 e，请向我们展示JD正在处理的生成的HTML，而不是模板文件。我也删除了您的change（）方法，因为这是最大的调用堆栈，如果您想默认使用css
style=“display:none”