jQuery下拉框控制Div显隐在CRUD编辑场景失效的问题咨询

问题出在编辑场景下，页面加载时下拉框已有初始选中值，但你的代码仅在用户手动切换下拉框时才执行显示/隐藏逻辑，没有在页面初始化阶段根据当前选中值处理元素状态，导致输入字段保持默认隐藏。

修改后的代码实现 #

JavaScript 部分

$(document).ready(function() {
    // 封装isRequested下拉框的显示隐藏逻辑
    function handleIsRequested() {
        const value = $('#isRequested').val();
        if (value === "true" && value !== "select") {
            $('.entity').show();
        } else {
            $('.entity').hide();
        }
    }

    // 封装isApproved下拉框的显示隐藏逻辑
    function handleIsApproved() {
        const value = $('#isApproved').val();
        if (value !== "true" && value !== "select") {
            $('#denial').show();
        } else {
            $('#denial').hide();
        }
    }

    // 页面加载时先执行一次，处理初始值
    handleIsRequested();
    handleIsApproved();

    // 绑定change事件
    $('#isRequested').change(handleIsRequested);
    $('#isApproved').change(handleIsApproved);
});

HTML 部分（保持原结构即可）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-12 row">
    <div class="col-md-4">
      <label class="col-form-label text-lg-left" asp-for="IsPreviouslyRequestedAssistance"></label>
      <select class="form-control click" id="isRequested" asp-for="IsPreviouslyRequestedAssistance">
        <option value="select">Please Select</option>
        <option value="true">Yes</option>
        <option value="false">No</option>
      </select>
    </div>
    <div class="col-md-4 entity showup" style="display:none">
      <label id="EntityName" class="col-form-label " asp-for="EntityName"></label>
      <input type="text" id="EntityName" asp-for="EntityName" class="form-control" />
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-12 row entity" style="display: none">
    <div class="col-md-4 ">
      <label asp-for="WasApproved" class="col-form-label"></label>
      <select id="isApproved" class="form-control " asp-for="WasApproved">
        <option value="select">Please Select</option>
        <option value="true">Yes</option>
        <option value="false">No</option>
      </select>
    </div>
    <div class="col-md-4" id="denial" style="display: none">
      <label asp-for="ReasonForDenial" class="col-form-label"></label>
      <input type="text" class="form-control" asp-for="ReasonForDenial">
    </div>
  </div>
</div>

关键改动说明 #

• 将显示隐藏逻辑封装成独立函数，避免代码重复，同时方便页面初始化时调用
• 页面加载完成后主动调用一次逻辑函数，根据下拉框的初始选中值处理元素的显示/隐藏状态
• 绑定change事件时直接复用封装好的函数，保证手动切换下拉框时逻辑一致

内容的提问来源于stack exchange，提问作者Mizanur Rahaman