javascript - 将 'Select All' 添加到 Bootstrap 多选表单/列表

Question

我有一个 .NET Web 应用程序，其中包含多个 View ，允许我从数据库表中进行选择。

我使用的是 Bootstrap 4.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>

AllProducts 在我的一个 Controller 上定义，并生成从模型中提取的产品列表。

根据我读过的一些类似答案，我认为我需要编写 JS 脚本来添加“全选”选项，但我见过的大多数示例都处理一个选项列表此处定义，而不是使用 ViewBag。

我尝试了类似的方法，但无法让它工作:

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

有什么建议吗？尝试看看我是否朝着正确的方向前进。

Answer 1

在使用标签助手构建的每个多选中，您可以有一个名为 .select-all 的类的选项，然后您可以编写一些简单的 javascript添加所需的行为:单击时选择除自身之外的所有选项。

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

// View model
public class DashboardViewModel
{
    [Display(Name = "Products")]
    public int[] SelectedProducts { get; set; }

    public IDictionary<int, string> AvailableProducts { get; set; }
}

// Controller
public IActionResult Index()
{
    var vm = new DashboardViewModel
    {
        // Simulate getting data from persistence storage to form the view model
        AvailableProducts = new Dictionary<int, string>()
        {
            { 1, "Cabinet" },
            { 2, "Countertop" },
            { 3, "Sink" },
            { 4, "Faucet" },
            { 5, "Flooring" },
            { 6, "Tile" }
        }
    };

    return View(vm);
}

@*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>

最后你可以为.select-all选项的点击事件编写一些简单的javascript:

<script type="text/javascript">
    $(function() {
        $('select[multiple="multiple"]').on('click', 'option.select-all', function() {
            let $selectAllOption = $(this),
                $select = $(this).closest('select');

            // Select all options
            $('option', $select).prop('selected', true);

            // De-select the select-all option
            $selectAllOption.prop('selected', false);

            return false;
        });
    });
</script>