使用 jQuery cookie 在下拉选择框中选择一个值

Question

I am using jQuery. I have set value in cookie and I wanted a dropdown value selected. Here is my HTML code:

 <select id="usrole" class="form-control usrole txtboxdesign" >
                    <option>Select Role</option>
                </select>

Here is my code that populate dropdownvalue using jQuery axios:

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);

    }
});
}

I have console the cookie value and I got the value. But I cannot set selected the dropdown value. Here is my code

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

This code is not working.

Answer 1

Why don't you use .val()

var roleid = $.cookie("roleid");
$('#usrole').val(roleid);

That will do the job i think

Example

 var dropdowns = [ {'Id': 1, 'value': 'Blackberry'}, {'Id': 2, 'value': 'Nokia'}, {'Id': 3, 'value': 'Xiomi'} ]; function GetAllRole() { let select = document.getElementById('usrole'); for (let i = 0; i < dropdowns.length; i++) { var optname = dropdowns[i].value; var optid = dropdowns[i].Id; var el = document.createElement("option"); el.textContent = optname; el.value = optid; select.appendChild(el); } } GetAllRole(); var roleid = 3; $('#usrole').val(roleid);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="usrole" class="form-control usrole txtboxdesign" > <option>Select Role</option> </select>

Answer 2

If your changed value is not reflected on the UI, Please try:

var roleid = $.cookie("roleid");
$('#usrole').val(roleid).change();