在jQuery多选下拉列表中设置选定的值

Question

我有一种情况，我必须设置多选下拉列表中选择的多个值，如下面的屏幕快照所示。

以下是我的模型，并且我将ExcursionList作为字符串List的类型。

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

我将控制器中的酒店信息作为JSON结果返回，并在jquery中检索该值，如下面的代码所示。

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

}

就像console.log中的值一样，我得到3个选定值。 但是在我的下拉菜单中，它仅选择一个值，如下面的屏幕截图所示。

如果有人可以在这里帮助我，我真的很感激。

Answer 1

注意：val是使用下拉列表的value属性使用设置值，例如

<select>
 <option value="1" > option 1  </option>
 <option value="2" > option 2  </option>
 </select>

在您的情况下，您需要使用text（）设置值。

$("#excursion").text(value.ExcursionList).multiselect('refresh');

尝试这个

var tempArr = [];

 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);
        tempArr.push(value.ExcursionList)
    }); //closing of each

        $("#excursion").text(tempArr).multiselect('refresh');
      //  $('#excursion').multiselect('refresh');
  tempArr = []; //empty temp array
    }

Answer 2

谢谢您的帮助。 我能够使用razor视图引擎和C＃解决此问题。 不使用jQuery。

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

通过正确选择下拉值，以上内容可完美工作