使用jQuery Cookie设置下拉选择框选中值失败，求解决方案

你的问题核心在于代码执行时机不对——当你尝试设置下拉框选中状态时，通过axios加载的下拉选项还没有渲染完成，所以找不到对应的option元素，导致设置无效。

问题原因拆解 #

GetAllRole函数里的axios.get是异步请求，浏览器会优先执行你后面的设置选中代码，等后端返回数据、渲染完下拉选项时，设置代码已经执行完毕了，自然找不到目标选项。

修复方案 #

把设置选中状态的逻辑放到axios请求的回调函数里，确保下拉选项完全渲染后再执行设置操作，同时推荐用jQuery的val()方法来设置选中，比直接操作selected属性更可靠：

function GetAllRole() {
    alert('Role Value');
    axios.get(all_RoleList + '/GetAll', authToken).then(function (result) {
        console.log(result);
        let select = document.getElementById('usrole');
        for (let i = 0; i < result.data.resultSet.length; i++) {
            var optname = result.data.resultSet[i].roleName;
            var optid = result.data.resultSet[i].id;
            var el = document.createElement("option");
            el.textContent = optname;
            el.value = optid;
            select.appendChild(el);
        }
        // 选项渲染完成后再设置选中状态
        var roleid = $.cookie("roleid");
        // 使用jQuery的val()方法直接设置选中值
        $('#usrole').val(roleid);
        
        // 额外提示：如果roleid是字符串，但option的value是数字类型，可转换类型后再设置
        // $('#usrole').val(parseInt(roleid));
    });
}

为什么之前的代码不生效？ #

你原来的设置代码：

var roleid = $.cookie("roleid");
$('#usrole option[value="' + roleid + '"]').attr('selected', 'selected');

执行时，下拉框里只有默认的<option>Select Role</option>，其他选项还没被添加，所以选择器$('#usrole option[value="' + roleid + '"]')找不到任何元素，自然无法设置选中状态。

另外，直接操作selected属性不如val()方法可靠，jQuery的val()会自动匹配对应的选项并设置选中，无需手动查找option元素。

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