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

Question

如何为MVC 3 实现选择的插件？

对于这种类型的输出

Answer 1

我已重新配置所选插件，如下所示并正常工作。

我的剃须刀：

<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");

Answer 2

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

希望这可以帮助