Javascript 将“全选”添加到引导多选表单/列表

我有一个.NETWeb应用程序，它有几个视图，允许我从数据库表中进行选择

我使用的是Bootstrap4.3，并生成了列表，但我需要添加一个“全选”选项，这样您就不必单独单击所有值

下面是.cshtml文件的相关部分：

<div class="form-group">
     <label asp-for="Products" class="control-label"></label>
     <select asp-for="Products" class="form-control" asp-items="ViewBag.AllProducts" size="10"></select>
</div>

---

有什么建议吗？尝试查看我的方向是否正确。

在使用标记帮助程序构建的每个multi-select上，您可以有一个名为.select all的类选项，然后您可以编写一些简单的javascript来添加所需的行为：单击时选择除自身之外的所有选项

但是在我向您展示javascript代码之前，我强烈建议不要使用ViewBag将可用产品列表带到视图中以构建下拉选项。您已经在使用视图模型。为什么不在那里定义另一个属性来包含它呢

//视图模型 公共类仪表板视图模型 { [显示名称=产品] public int[]SelectedProducts{get；set；} 公共IDictionary可用产品{get；set；} } //控制器 公众谘询结果索引 { var vm=新的仪表板视图模型 { //模拟从持久性存储获取数据以形成视图模型 AvailableProducts=新字典 { {1，内阁}， {2，台面}， {3，Sink}， {4，水龙头}， {5，地板}， {6，Tile} } }; 返回Viewvm； }

---

谢谢，我用您提供的javascript实现了这一点。至于Viewbag选择，这是一个我没有开发的工作代码库。我可能会考虑将此转换为使用视图模型。Viewbag有什么主要缺点吗？或者为什么不推荐使用它？@johnann:请看这个：。我的观点是：既然您已经将一个视图模型传递给视图，那么您也可以在视图模型中定义您需要的内容。但由于这不是你的代码库，我想你可能不得不接受它：p

$(".multiselect", this.el).multiselect({
includeSelectAllOption: true
});

@*View*@
@model DashboardViewModel

<div class="form-group">
    <label asp-for="SelectedProducts"></label>
    <select asp-for="SelectedProducts" class="form-control" 
        asp-items="new MultiSelectList(Model.AvailableProducts, "Key", "Value")" size="10">
        <option class="select-all">- select all -</option>
    </select>
</div>