如何通过动态下拉框填充HTML表单字段（含单选框联动）

你的问题出在单选框不能用val()方法设置选中状态，val()对单选框组仅用于获取当前选中的值，而非设置选中项。需要通过匹配单选框的name和value属性，设置其checked属性来实现自动选中。

修改后的JavaScript代码 #

把原脚本中$("#ENABLED2").val(GetValueEn);这一行替换为以下代码：

// 根据GetValueEn的值匹配对应的单选框并设置选中
$(`input[name='ENABLED2'][value='${GetValueEn}']`).prop('checked', true);

完整的修改后脚本如下：

$(document).ready(function() {
    $("#ddlModel").on("change", function() {
        var GetValue = $("#ddlModel").val();
        const GetValueArray = GetValue.split(" - ");

        var GetValueSold = GetValueArray[2];
        var GetValueID = GetValueArray[1];
        var GetValueEn = GetValueArray[0];

        $("#SOLDTO2").val(GetValueSold);
        $("#ID2").val(GetValueID);
        // 替换原来的val()方法，改为设置单选框的checked属性
        $(`input[name='ENABLED2'][value='${GetValueEn}']`).prop('checked', true);
    });
});

原理说明 #

• jQuery的prop()方法用于设置DOM元素的属性，对于单选框的checked属性，设置为true即可选中该选项。
• 选择器input[name='ENABLED2'][value='${GetValueEn}']精准定位到name为ENABLED2且value与下拉返回值匹配的单选框。

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