set selected value in jquery multiselect dropdown

Question

I have a scenario that I have to set the multiple values as selected in the multi-select dropdown as shown in below screenshot.

Following is my model and I have ExcursionList as the type of string List there.

 public class HotelInfo
{
 public List<string> ExcursionList { get; set; }
}

I am returning my hotel information as a JSON result in the controller and retrieve that value in jquery as shown in below code.

function LoadHotelDetails(data) {
    if (data) {
        $.each(data.ResultList, function (index, value) {
            $("#hotelName").val(value.HotelName);
            $("#nights").val(value.Nights);

            // this console.log print ["* EARLY CHECK-IN", " * LATE CHECK-OUT", " *- REFUND -*"] value to console.
            console.log(value.ExcursionList);

            $("#excursion").val(value.ExcursionList);

            $('#excursion').multiselect('refresh');

}

As in console.log value, I am getting 3 selected value. But in my dropdown, It's selecting only one value as shown in the below screenshot.

I am really thankful if anybody can help me here.

Answer 1

Thanks For the help. I was able to fix the issue using razor view engine and C#. Without using jquery.

 @Html.ListBoxFor(model => model.ExcursionList, ((IEnumerable<SelectListItem>)ViewBag.ExList), new { @class = "form-control", id = "excursion", multiple = "multiple" })

The above works perfectly by selecting the dropdown values correctly