jQuery中Select动态生成的option无法被设置_jq动态添加的option设置属性没反应-优快云博客

本文链接：https://blog.youkuaiyun.com/connora/article/details/105934717

本文介绍了一种解决在使用jQuery动态更新下拉菜单（Select元素）时，新选项值无法正确设置的问题。通过将值的设置操作放入Ajax成功回调函数内，确保了DOM更新后值能被正确设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决方法：https://stackoverflow.com/questions/37072523/set-selected-option-jquery

遇到问题如下：

设置两个select（deviceId，portId），根据deviceId的值刷新portId 的option，但是portId的值始终无法被设置

$("select[name$='deviceid']").val(receive[0].deviceId);//设置设备列表选中项

loadPortSelect(receive[0].deviceId, "#portid");//portid填充设备的所属端口

$("select[name$='portid']").val(receive[0].portId);//设置无效

$("#portid").find("option[value = '" + receive[0].portId + "']").prop("selected", true);//依然无效

function loadPortSelect(deviceSerial, root) {
    path = 'DeviceDetail/' + deviceSerial;
    var row = "";
    $.ajax({
        type: 'get',
        data: { pagesize: 999 },
        url: BaseUrl + path, //接口地址
        success: function(receive) {
            //fillForm(type, receive);
            $(root).empty();
            $(receive.data).each(function(index, item) {
                row = row + "<option value = \"" + item.portId + "\">" +
                    item.slot + "/" +
                    item.module + "/" +
                    item.port + "-" +
                    item.link_type + "-" +
                    item.vlan_id + "-" +
                    item.group_id + " </option>";
            });
            $(root).append(row);
        },
        error: function() {}
    });
}

根据StackOverFlow提到的思路，将portId的设置命令放入Ajax成功的子语句，问题解决。

$("select[name$='deviceid']").val(receive[0].deviceId);
loadPortSelect(receive[0].deviceId, "#portid", "portid", receive[0].portId);

function loadPortSelect(deviceSerial, root, SelectName, SelectVal) {
    path = 'DeviceDetail/' + deviceSerial;
    var row = "";
    $.ajax({
        type: 'get',
        data: { pagesize: 999 },
        url: BaseUrl + path, //接口地址
        success: function(receive) {
            //fillForm(type, receive);
            $(root).empty();
            $(receive.data).each(function(index, item) {
                row = row + "<option value = \"" + item.portId + "\">" +
                    item.slot + "/" +
                    item.module + "/" +
                    item.port + "-" +
                    item.link_type + "-" +
                    item.vlan_id + "-" +
                    item.group_id + " </option>";
            });
            $(root).append(row);
            $("select[name$='" + SelectName + "']").val(SelectVal);
        },
        error: function() {}
    });
}