c# - 如何使用 'chosen.js' 插件在 MVC 3 中实现多选

Question

如何实现chosen MVC 3 的插件？

对于这种类型的输出

Answer 1

这是我如何使 chosen.js 与 javascript/MVC 一起工作的代码

这是我的下拉代码

@Html.DropDownListFor(m => m.CategoryId,
                                    new SelectList(Model.Categories, "Id", "Name"),
                                    "Choose a Category...",
                                    new
                                    {
                                        id = "CategoryId",
                                        multiple = "",
                                        @class = "chzn-select srs-select search-dropdown",
                                        data_placeholder = "Choose a Category..."
                                    })

这里我使用'chzn-select'样式

-- 在准备好的文档中，应该调用 .chosen() 函数。

$(document).ready(function () {

    $('.chzn-select').chosen();
});

在 Javascript 中，要检索选择的内容，这是代码

检索下拉框中选中项目的代码

var selectedCategoryId = $('Select#CategoryId').val();
    var selectedCategories = "";

    if (selectedCategoryId != null) {
        $.each(selectedCategoryId, function (index, value) {
            selectedCategories = selectedCategories + value + ",";
        });
    }

基本上 selectedCategories 具有所选项目的 ID，由 ',' 分隔

使用所选值更新下拉列表

将你的值复制到数组中

var categoryArray = new Array(); 

...有代码初始化数组，其中包含之前选择的值。

//让你选择的代码，数组有你的值。

$('Select#CategoryId').val(categoryArray);

$('.chzn-select').trigger('chosen:updated');

希望对你有帮助