如何使用引导多选插件根据服务器端数据获取和设置多个复选框值

Posted 2023-04-13

【中文标题】如何使用引导多选插件根据服务器端数据获取和设置多个复选框值

【英文标题】：How to get and set multiple checkbox values based on serverside data using bootstrap multiselect plugin

【发布时间】：2018-02-03 09:15:07

【问题描述】：

这里我有包含多个值的下拉列表。用户可以通过单击值前面的复选框来选择任何值，如下所示。

以下是我的 C# 代码。

@html.DropDownList(m => m.Detail, new SelectList(ViewBag.detailList, "Value", "Text"), new  id = "det" , multiple= "multiple")

$(document).ready(function() 
    $('#det').multiselect();
);

当用户单击保存按钮时，我想获取用户选择的列表。我正在使用以下代码来获取值。

$("#det").val()

但是上面的值是空的。如何获取现有的选中值？

而且我还想显示基于服务器端值选择的值。 我正在创建模型并使用硬编码值设置模型属性，如下所示。

model.Detail = "Cheese, Tomatoes";

但是这些值也没有在下拉列表中被选中。

这里使用的插件 - link 有什么帮助吗？

谢谢。

【问题讨论】：

您的Detail 属性必须是IEnumerable<string>，而不是string，并且如果您的生成选项具有值“奶酪”和“西红柿”，那么您设置model.Detail = new List<string> "Cheese", "Tomatoes" ;

如果ViewBag.detailList 已经是IEnumerable<SelectListItem>，那么使用new SelectList(ViewBag.detailList, "Value", "Text") 创建另一个相同的就毫无意义了

并使用ListBoxFor() 而不是DropDownListFor() 来生成多选。

【参考方案1】：

您需要在属性中添加 multiple="multiple" 才能使多选起作用。

@Html.DropDownList(m => m.Detail, new SelectList(ViewBag.detailList, "Value", "Text"), 
         new  id = "det", multiple= "multiple" );

设置值：

<script>
    var selectedValues = @model.Detail;

    var dataarray = selectedValues.split(",");

    // Set the value
    $("#det").val(dataarray);
    $("#det").multiselect("refresh");
</script>

【讨论】：

它工作正常。我想找到的是如何从服务器发送多个值并根据服务器端值在客户端选择它们。

我只是在输入 :)。更新了答案

但我认为你已经结合了剃须刀代码和 jquery。我无法在 jquery 端使用我选择的值，因为我在 razor 中获取了选择的值。我说的对吗？

Razor 最终将 cshtml 编译成 html。上面的代码在浏览器中看起来像var selectedValues = "Cheese, Tomatoes"。现在，您想将 model.Detail 属性中的值绑定到下拉列表。所以你需要将值传递给一个 javascript 变量。

不要使用DropDownList()创建多选，使用ListBoxFor()（参考this answer）

【参考方案2】：

首先，使用最适合 Multiselect js 的 @Html.ListBoxFor。

为了获取所选选项的值，我创建了以下客户端代码，它以字符串数组的形式返回值列表

function GetDropDownVal() 
        var selectidList = [];
        var selectedItem = $("#ListQueCatId").val();
 // .multiselect("getChecked") can also be used.
        if (selectedItem != null) 
            for (var i = 0; i < selectedItem.length; i++) 
                selectidList.push(selectedItem[i]);
            
        
        return selectidList;
    

这就是我实现代码的方式 查看侧代码

 @Html.ListBoxFor(m => m.ListQueCatId, (SelectList)ViewBag.AllQueCat as MultiSelectList, new  @class = "form-control listQueCatIdDdl" )

Javascript 代码

 $(".listQueCatIdDdl").multiselect( noneSelectedText: "--Select Category(s)--" );

另外，在我的例子中，请确保绑定 Type List 的模型属性，ListQueCatId 是 List，因此当您发布表单时，您将在模型中获得选定的值。

另外，我认为不需要添加多个属性，因为插件是为了选择多个值。

【讨论】：

var selectedItem = $("#ListQueCatId").val(); 已经是所选选项值的数组。创建另一个相同的数组完全没有意义