jQuery中Select动态生成的option无法被设置

本文介绍了一种解决在使用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() {}
    });
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值