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

Question

我有一个场景，我必须在 multi-select 下拉列表中将多个值设置为 selected，如下面的屏幕截图所示。

以下是我的模型，我将 ExcursionList 作为字符串列表的类型。

 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 selected 值。但是在我的下拉菜单中，它 select 只有一个值，如下面的屏幕截图所示。

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

Answer 1

Note: val is use set value using value attribute of drop-down e.g

<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" })

通过正确选择下拉值，以上内容完美运行

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

set selected value in jquery multiselect dropdown

c#

jquery

asp.net-mvc

jquery-multiselect