c# - 「chosen.js」プラグインを使用して MVC 3 で複数選択を実装する方法

Question

MVC 3 用に選択したプラグインを実装する方法は?

このタイプの出力の場合

Answer 1

これは、choose.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');

お役に立てれば

Answer 2

このように使うべきだと思います。

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

これはあなたを助けるでしょう。