C# 如何使用bootstrap multiselect插件基于服务器端数据获取和设置多个复选框值

这里我有dropdownlist，它包含多个值。用户可以通过单击值前面的复选框来选择任意数量的值，如下所示

下面是我的c代码

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

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

当用户单击“保存”按钮时，我希望获得用户所选列表。我使用以下代码来获取值

$det.val

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

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

模型细节=奶酪、西红柿

但这些值在dropdownlist中也没有被选中

在这里使用插件- 有什么帮助吗

---

谢谢。

您需要在属性中添加multiple=multiple，以便multiselect工作

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

---

您需要在属性中添加multiple=multiple，以便multiselect工作

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

---

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

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

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;
    }

Javascript代码

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

另外，请确保绑定类型为List的模型属性（在我的示例中，ListQueCatId是List），因此，在发布表单时，您将在模型中获得选定的值

---

此外，我认为不需要添加多个属性，因为插件用于选择多个值。

首先，使用@Html.listbox，这对Multiselect js最有效

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

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;
    }

Javascript代码

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

另外，请确保绑定类型为List的模型属性（在我的示例中，ListQueCatId是List），因此，在发布表单时，您将在模型中获得选定的值

---

此外，我认为不需要添加多个属性，因为插件用于选择多个值。

它工作正常。我想找到的是如何从服务器发送多个值，并根据服务器端的值在客户端选择它们。我只是键入：。更新了答案，但我认为您已经结合了razor代码和jquery。我无法在jquery端使用我的选定值，因为我将在razor中获取选定值。我说的对吗？Razor最终将cshtml编译成html。上面的代码看起来像浏览器中的var selectedValues=Cheese，tomatos。现在，您需要将model.Detail属性中的值绑定到下拉列表。因此，您需要获取javascript变量的值。不要使用DropDownList来创建多选，请使用ListBoxFor来说明其是否正常工作。我想找到的是如何从服务器发送多个值，并根据服务器端的值在客户端选择它们。我只是键入：。更新了答案，但我认为您已经结合了razor代码和jquery。我无法在jquery端使用我的选定值，因为我将在razor中获取选定值。我说的对吗？Razor最终将cshtml编译成html。上面的代码看起来像浏览器中的var selectedValues=Cheese，tomatos。现在，您需要将model.Detail属性中的值绑定到下拉列表。因此，您需要获取javascript变量的值。不要使用DropDownList创建多重选择，请使用ListBoxFor Reference您的Detail属性需要是IEnumerable，而不是string，如果生成的选项值为Cheese和Tomatoes，则设置model.Detail=new List{Cheese，Tomatoes}；如果ViewBag.detailList已经是IEnumerable，那么使用新的SelectListViewBag.detailList、Value、Text和use ListBoxFor not DropDownList来创建另一个相同的选项是没有意义的。如果您的Detail属性需要是IEnumerable，而不是string，并且生成的选项的值为Cheese和Tomato，然后设置model.Detail=newlist{奶酪，西红柿}；如果ViewBag.detailList已经是IEnumerable，那么使用新的SelectListViewBag.detailList、Value、text和use ListBoxFor not DropDownList for生成多个select.var selectedItem=$ListQueCatId.val创建另一个相同的视图是毫无意义的；已存在所选选项值的数组。创建另一个完全相同的数组是完全没有意义的svar selectedItem=$ListQueCatId.val；已存在所选选项值的数组。创建另一个相同的数组是完全没有意义的