複数選択ドロップダウンは

Question

私は私が

int minYear =Int32.Parse(Helper.MinYear); 
int maxYear = Int32.Parse(Helper.MaxYear); 
var yearSelectedList = new List<SelectListItem>(); 
for (int count = minYear; count <= maxYear; count++) 
{ 
    yearSelectedList.Add(new SelectListItem() 
    { 
     Text = count.ToString(), 
     Value = count.ToString() 
     }); 
    } 
    var yearselectlist = new SelectList(yearSelectedList, "Value", "Text"); 
    ViewData["YearSelected"] = yearselectlist; 

と上のコントローラに言及しているマルチ選択のドロップダウン年のリストで埋め

@Html.DropDownList("year_selected", (SelectList)(ViewData["YearSelected"]), new { tabindex = "14", multiple = "multiple", style = "width:150px;height:200px;" }) 

そのを持ってMVC4プロジェクトに取り組んでいますドロップダウンをクリックしてjqueryを呼び出してその特定の値を選択し、ページがロードされたときにデータベースに保存されている値をデフォルトで選択してチェックする

jquery codeドロップダウンをユーザーがクリックするか、キーを押し、Ctrlキーを

year_selected.change(function() { 
    var selectedyears = ""; 
    $("#year_selected :selected").each(function (i) { 
     if (i != 0) { 
      selectedyears += ","; 
     } 
     selectedyears += $(this).text(); 
    }); 
    str_year_selected.val(selectedyears); 
}); 

値iが値を選択するために使用していたデータベース

if (str_year_selected.val() != "") { 
    var yeararray = str_year_selected.val().split(","); 
    for (var i in yeararray) { 
     var val = yeararray[i]; 
     year_selected.find('option:[value=' + val + ']').attr('selected', 1); 
    } 
} 

に保存され、ここにコードがあるされ、選択した値は、すべてが完璧に働いています。しかし、今問題は、ドロップダウンの内側にチェックボックスがあり、オプションをチェックできることです。

どうすればよいですか？

Answer 1

ユーザーがドロップダウン内のチェックボックスをオンにすると、そのオプションをチェックできます。

Dropdown Check Listという素晴らしいJQueryプラグインがあり、通常の選択HTML要素をドロップダウンチェックボックスリストに変換します。

Download

Answer 2

よりもむしろあなたがCSSでdiv要素のチェックボックスを使用することができますドロップダウンを使用しました。それはチェックボックス付きドロップダウンリストのようになります。

ここでjqueryの

http://www.erichynds.com/blog/jquery-ui-multiselect-widget

Answer 3

の良いリンクがあるこのリンクは、ドロップダウンリストのあるチェックボックスを持って、私はこのリンクは、あなたの質問に最適なであると思います。 http://wenzhixin.net.cn/p/multiple-select/#setselects-getselects

Answer 4

このチュートリアルでは、MVC Multiselect dropdown with checkboxes in MVC

のチェックボックスで複数選択ドロップダウンリストを作成するためのステップガイドによって、完全な工程を示しているあなたは

<select id="CustomerId" name="CopyFromCustomerId"></select> 

またはあなたが必要Html.ListBoxFor

を使用することができますselectタグが必要次のスクリプト

$('#CustomerId').multiselect({ 
      includeSelectAllOption: true 
     }); 

とCSS、スクリプトの下には、それは素晴らしいです

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> 
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>  
<script type="text/javascript" src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script> 
<link rel="stylesheet" href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css"/>