预填充 <select multiple> 表单控件答案

【问题标题】：Prepopulating <select multiple> form-control预填充 <select multiple> 表单控件
【发布时间】：2018-04-05 22:12:57
【问题描述】：

我正在尝试在 <select multiple class=form-control> 元素中预选多个值。我正在使用 ASP.Net Core 和 RAZOR 来呈现 html。

在 html 文件的顶部，我定义了希望在多选框中显示的一长串水果。稍后，我遍历列表并获取用户之前选择的水果，并尝试在列表中显示已选择的选项。

@{  
    var allFruitsList = new List<string>() 
        {"strawberries","blueberries","bananas","kiwis",
         "apples", "raspberries", "pears"};

    var profile = ViewData["UserFavoriteFruit"];
    var myFaveFruits = profile.MyFavoriteFruits; //would be List<string>
}

这是我查看之前选择的水果的代码部分，以了解我希望在页面加载时显示为已选择的水果

<select multiple class="form-control" id="myMultiselect">
    <option disabled> - - - - - Select Favorite Fruit - - - - -</option>
        @foreach (var v in allFruitsList)
        {
            if (myFaveFruits.Contains(@v))
            {
                <option selected>@v</option>
            }
            else
            {
                <option>@v</option>
            }
        }
</select>

我尝试了很多不同的方法，包括：

<option selected="true">@v</option>
<option selected="selected">@v</option>
<option selected>@v</option>
<option selected="selected" value=@v>@v</option>
<option onload="MakeSelectionLookSelected()"></option>

<option onload="MakeSelectionLookSelected('@v')" id='@v'>@v</option>

MakeSelectionLookSelected() {
    $(this).click();
}

MakeSelectionLookSelected() {
    $(this).change();
}

MakeSelectionLookSelected(id) {
    $("#"+id).click();
}

MakeSelectionLookSelected(id) {
    $("#"+id).change();
}

这些方法都不起作用。奇怪的是，当我使用 DOM 资源管理器时，代码反映了正确的 <option> 元素被标记为“selected”属性，但 UI 没有在应该被选中的条目周围显示蓝色框填充...

有人知道我做错了什么吗？我还能尝试什么？如果引导多重选择不允许预填充？有什么好的选择？

【问题讨论】：

标签： javascript html razor bootstrap-4

【解决方案1】：

想出了一个解决办法！

所以我需要添加“selectpicker”类。 https://silviomoreto.github.io/bootstrap-select/

所以现在我的字段如下所示：

<select multiple class="selectpicker form-control" id="myMultiselect">

当单独使用 selectpicker 时，格式看起来会消失，但同时使用这两种方法也有助于风格化它

【讨论】：