ASP.NET MVC 数据库加载下拉框选中后拆分值填入多文本框问题

问题原因 #

你当前的错误来自两处逻辑问题：

• 生成下拉选项时，直接将Nombre和id拼接后作为<option>的value值，导致选中后拿到的天然就是拼接后的内容
• getValue方法没有做字段拆分，直接把完整的value同时赋值给了两个文本框

具体修改方案 #

方案1：拆分value值（改动最小） #

第一步：修改下拉选项生成逻辑，给拼接值加分隔符

把原来拼接option value的代码加上自定义分隔符，比如||，避免后续拆分歧义：

// 原来的代码
s += '<option value="' + data[i].Nombre + data[i].id + '">' + data[i].numero_control + '</option>';
// 替换为
s += '<option value="' + data[i].Nombre + '||' + data[i].id + '">' + data[i].numero_control + '</option>';

第二步：修改getValue函数，拆分value赋值

function getValue() {
    var myVal = $("#numero_control").val();
    if(myVal === "-1") {
        // 选中默认提示项时清空文本框
        $("#Nombre").val("");
        $("#id").val("");
        return;
    }
    // 按分隔符拆分出两个字段
    var valArr = myVal.split("||");
    $("#Nombre").val(valArr[0]);
    $("#id").val(valArr[1]);
}

方案2：使用data属性存储（更规范，避免分隔符冲突） #

如果担心Nombre字段本身包含你选用的分隔符导致拆分错误，可以用HTML自定义data属性分别存储两个字段：

第一步：修改下拉选项生成逻辑

s += '<option value="' + data[i].numero_control + '" data-nombre="'+ data[i].Nombre +'" data-id="'+ data[i].id +'">' + data[i].numero_control + '</option>';

第二步：修改getValue函数，直接读取data属性

function getValue() {
    var selectedOption = $("#numero_control").find("option:selected");
    $("#Nombre").val(selectedOption.data("nombre") || "");
    $("#id").val(selectedOption.data("id") || "");
}

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