HTML Multi select options drop down

Question

I have HTML multi-select options with few options bound from the database. user selects the

options & saves them in the database, now when a user visits the page I want the user to see their pre-selected values but

it works for hardcoded values like

var values = "1,2,3";

but for the same hidden values from the database, which are user's preselected it just show for the first one

// var values = hidden;

when var values = "1,2,3"; exactly the same as var values = hidden values then why am I not getting all options selected for hidden values? it just shows the first value selected

Please answer

My code is below :

$(function () {

var hdnvalues = "";

if ($.trim($('#<%=hfroles.ClientID %>').val() != "")) {

hdnvalues = $.trim($('#<%=hfroles.ClientID %>').val());

}

var values = "1,2,3";

// var values = hdnvalues;

$.ajax({

type: "POST",

url: "NotificationsNews.aspx/GetRoles",

data: '{}',

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function (r) {

var ddlRoles = $("[id*=ddlRoles]");

$.each(r.d, function () {

ddlRoles.append($("<option></option>").val(this['Value']).html(this['Text']));

$.each(values.split(","), function (i, e)

{

$("#ddlRoles option[value='" + e + "']").prop("selected", true);

});

});

});

});

});