如何使用'chosen.js'插件在MVC 3中实现多选答案

【问题标题】：How to implement multiple select in MVC 3 using 'chosen.js' plugin如何使用'chosen.js'插件在MVC 3中实现多选
【发布时间】：2013-08-06 09:00:06
【问题描述】：

如何为 MVC 3 实现chosen 插件？

对于这种类型的输出

【问题讨论】：

您阅读文档了吗？你已经尝试过什么了吗？您是否遇到了一些具体的困难？
是的，我阅读了文档并尝试现在正常工作。但问题是我在选择电子邮件 ID 后找不到 ID。例如数据库中的条目 EmailID = abc@xyz.com & ID=125 我在任何地方都找不到“ID=125”。

标签： c# asp.net asp.net-mvc-3 razor jquery-chosen

【解决方案1】：

这是我的代码如何使 selected.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');

希望对你有帮助

【讨论】：

【解决方案2】：

我已经重新配置了如下选择的插件并且工作正常。

我的剃须刀：

<div style="width: 750px; clear: both; margin-left: 170px;">

            @Html.ListBox(
                             "Emailaddress",
                             ViewBag.EmailaddressList as MultiSelectList,
                             new { @class = "chosen-select", data_placeholder = "Choose a Emailaddress...", style = "width:750px;", tabindex = "4" }
                         )
</div>

在你的 html Razor 代码之后添加这个脚本

<script src="@Url.Content("~/Scripts/chosen.js/chosen.jquery.js")" type="text/javascript"></script>
        <script type="text/javascript">
            var config = {
                '.chosen-select': {},
                '.chosen-select-deselect': { allow_single_deselect: true },
                '.chosen-select-no-single': { disable_search_threshold: 10 },
                '.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
                '.chosen-select-width': { width: "95%" }
            }
            for (var selector in config) {
                $(selector).chosen(config[selector]);
            }
  </script>

我的观点：

ViewBag.Skills = new MultiSelectList(EmailaddressList, "Id", "EmailId");

【讨论】：

如何为 Model (List) 的属性设置此项

【解决方案3】：

请访问以下链接。这将帮助您使用 mvc3 实现所选插件。我发现这对我很有帮助。这是链接

http://utsavized.com/chosen-multiselect-dropdown-list-with-asp-net-mvc3/

【讨论】：

【解决方案4】：

我认为你应该这样使用。

@Html.DropDownListFor(model => model.CountryId, new SelectList(Model.Countries, "ID", "Name"), "select", new { @ID = "ddlCountry", @class = "chosen-select", multiple = "multiple", Style = "width: 150px;" })

这会对你有所帮助。

【讨论】：

你用过 class= "chzn-select" 吗？
我尝试过，但在应用 class= "chosen-select" 之后没有工作，然后它工作了