如何在MVC中根据PaysTrav值实时条件调用replaceWith替换ProvTrav元素

代码不生效的核心原因 #

你获取PaysTrav字段值的方式错误，$("input[id$='PaysTrav'] 拿到的是jQuery元素对象，不是输入框的文本值，所以判断条件永远不成立。

修正后的完整代码 #

// 提取公共下拉HTML，避免重复冗余代码
const provSelectHtml = '<select id="Formulaire.Detail.DetailCmp.ListeCmpt.ListeCmptETS[0].IdentTravailleur.ProvTrav" name="Formulaire.Detail.DetailCmp.ListeCmpt.ListeCmptETS[0].IdentTravailleur.ProvTrav" class="ProductDetailsQuantityTextBox">' +
    '<option value="NB">NB</option>' +
    '<option value="QC">QC</option>' +
    '<option value="AB">AB</option>' +
    '<option value="MB">MB</option>' +
    '<option value="PE">PE</option>' +
    '</select>';

// 封装字段切换逻辑，可重复调用
function toggleProvInput() {
    // 正确取值：先拿输入框值、去首尾空格、转小写统一匹配，无需写多个大小写判断条件
    const pays = $("input[id$='PaysTrav']").val().trim().toLowerCase();
    const $provTarget = $("[id$='ProvTrav']");

    if (pays === 'canada') {
        // 仅当前为输入框时才执行替换，避免重复操作DOM
        if ($provTarget.is('input')) {
            $provTarget.replaceWith(provSelectHtml);
        }
    } else {
        // 非加拿大时还原为输入框，仅当前为下拉时才执行替换
        if ($provTarget.is('select')) {
            const inputHtml = `<input type="text" id="${$provTarget.attr('id')}" name="${$provTarget.attr('name')}" class="${$provTarget.attr('class')}" />`;
            $provTarget.replaceWith(inputHtml);
        }
    }
}

$(document).ready(function(){
    // 页面加载先执行一次，适配初始值就是加拿大的场景
    toggleProvInput();
    // 同时监听input和change事件，输入实时响应，无需等输入框失焦才触发
    $("input[id$='PaysTrav']").on('change input', toggleProvInput);
});

主要优化点 #

• 修复取值逻辑，兼容Canada的各种大小写写法
• 增加元素类型判断，避免重复替换DOM导致异常
• 补充反向还原逻辑，用户切换到其他国家时自动把下拉框改回输入框
• 保留原有字段的id、name、class属性，不影响表单提交和原有样式匹配
• 覆盖初始值场景，页面加载时如果PaysTrav已经是加拿大也会自动切换为下拉框

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