如何使用'chosen.js'插件在MVC 3中實現多個選擇

Question

如何實現用於MVC 3的chosen插件？

這種類型的輸出

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代碼剃刀後

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

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

Answer 2

請訪問以下link.this將幫助您實現與MVC3選擇插件。我發現這對me.here有用的是鏈接

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

Answer 3

我認爲你應該這樣使用。

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

這會幫助你。

Answer 4

這是我的代碼如何讓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，選擇' 造型

- 準備好文檔後，應該調用.chosen（）函數。

$(document).ready(function() { 

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

在Javascript中，檢索選擇什麼，這是代碼

來檢索dropdownbox所選項目的代碼

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

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

基本上selectedCategories有選擇的項目的識別，分隔'''

要更新下拉列表中的所選值

你的價值觀複製到一個數組

var categoryArray = new Array(); 

...還有就是初始化數組代碼whih之前被選中的值。

//代碼讓你選擇，數組有你的價值觀。

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

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

希望這有助於