.NET Core 2.1 MVC如何根据下拉框选中项动态显隐输入区域

第一步：调整目标Div的渲染逻辑 #

原有代码用服务端@if条件渲染目标Div，会导致选中值不匹配时Div根本不存在于DOM中，前端JS无法控制显隐。需要去掉外层的服务端判断，给Div加默认隐藏样式，保证元素始终在DOM结构里：

<div class="form-group" id="foobar" style="display: none;">
    <label asp-for="Jbkjs" class="control-label col-sm-4 col-lg-3"></label>
    <div class="col-sm-5">
        <input asp-for="Jbkjs" type="text" class="form-control" maxlength="5">
        <span asp-validation-for="Jbkjs" class="text-danger"></span>
    </div>
</div>

不需要担心初始状态不对，后续JS初始化时会自动根据下拉框的默认选中值设置正确的显隐状态，比纯服务端判断兼容性更好。

第二步：添加前端交互脚本 #

你的下拉框用了select2插件，需要兼容插件的选中事件，同时页面首次加载时要执行一次状态校验。把下面代码放到视图的Scripts节中（符合.NET Core MVC默认脚本加载约定，会在jQuery、select2加载完成后执行）：

@section Scripts {
    <script>
        $(function () {
            // 封装显隐控制逻辑
            function toggleTargetDiv() {
                // 把选中值转为数字，避免字符串/数字类型不匹配导致判断失效
                const selectedVal = Number($('#BusinessEntityTypeId').val());
                const $targetDiv = $('#foobar');

                if (selectedVal === 2) {
                    $targetDiv.show();
                } else {
                    $targetDiv.hide();
                    // 可选优化：隐藏时清空输入值、清除验证状态，避免隐藏字段的验证阻塞表单提交
                    const $input = $targetDiv.find('input[name="Jbkjs"]');
                    $input.val('').removeClass('input-validation-error');
                    $targetDiv.find('.field-validation-error').empty().removeClass('field-validation-error');
                }
            }

            // 同时绑定原生change事件和select2的选中事件，兼容所有触发场景
            $('#BusinessEntityTypeId').on('change select2:select', toggleTargetDiv);

            // 页面首次加载时执行一次，适配下拉框的默认选中值
            toggleTargetDiv();
        });
    </script>
}

关键注意点 #

• 不要保留原来的服务端@if渲染判断，否则下拉值首次加载不是2时，DOM中没有#foobar元素，JS选中值为2时也找不到元素展示
• 绑定事件时必须加select2:select事件，部分版本的select2不会触发原生change事件，会导致切换选项时逻辑不触发
• 如果Jbkjs字段配置了必填验证，建议加上代码里的可选优化逻辑，否则Div隐藏时输入框为空会导致表单提交被拦截，且用户看不到错误提示

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