jQuery实现仅当Enum下拉框选中值为2时显示指定字段

你遇到的核心问题是if语句后面多了一个不必要的分号，这导致不管下拉框选中什么值，slideDown()都会无条件执行。那个分号会让if的判断逻辑提前结束，后面的代码块变成了独立执行的内容，和if的判断结果完全无关。

另外为了交互逻辑更完整，我们还需要处理选中非2值时隐藏字段的情况，以下是修正后的完整代码：

<!-- 你的视图代码无需修改，保持原样即可 -->
<div class="form-group"> 
    <label asp-for="Certificate" class="control-label"></label> 
    <select id="crfct" asp-for="Certificate" asp-items="Html.GetEnumSelectList<Certificate>()" class="form-control"></select> 
    <span asp-validation-for="Certificate" class="text-danger"></span> 
</div> 
<div class="form-group" id="crfctcost"> 
    <label asp-for="CertificateCost" class="control-label"></label> 
    <input asp-for="CertificateCost" class="form-control" /> 
    <span asp-validation-for="CertificateCost" class="text-danger"></span> 
</div>

<script>
$(document).ready(function () {
    // 页面加载时先默认隐藏目标字段
    $("#crfctcost").hide();

    $("#crfct").change(function () {
        var selectedCertificate = $('#crfct').find(":selected").val();
        // 移除if后面的分号，让判断逻辑正确控制后续代码
        if (selectedCertificate == "2") {
            $("#crfctcost").slideDown();
        } else {
            // 选中其他值时，隐藏目标字段保证交互一致性
            $("#crfctcost").slideUp();
        }
    });
});
</script>

关键修正点说明： #

• 移除了if (selectedCertificate == "2");末尾的分号，确保代码块严格受if判断结果控制
• 新增else分支，当下拉框切换到非2的值时，通过slideUp()隐藏目标字段，避免字段一直显示的问题
• 保留初始的hide()调用，保证页面加载完成后目标字段处于隐藏状态

内容的提问来源于stack exchange，提问作者mohammed alani