首先開一個MVC專案
[](http://1.bp.blogspot.com/-S1UzcfC0Y1o/U_wrT7TrJtI/AAAAAAAABj8/lbIoB2J113k/s1600/01.%E9%96%8B%E6%96%B0%E5%B0%88%E6%A1%88.png) 透過NuGet引用Select2.js套件 [](http://3.bp.blogspot.com/-r0BD97ZmLPs/U_wrT5xcPTI/AAAAAAAABkE/LM86LOjUes0/s1600/02.%E5%BC%95%E7%94%A8%E5%8F%83%E8%80%83.png) 因為MVC使用Bootstrap框架，所以需要搭配[select2-bootstrap.css](http://zh-tw.cdnjs.com/libraries/select2)來修正畫面的輸出 [](http://1.bp.blogspot.com/-D8ZI1EUPzcI/U_wrTxzEHOI/AAAAAAAABkA/rzGEPLiMOzw/s1600/03.SelectBootstrap.png) 新增一個HomeModel用來傳遞資料 public class HomeModel { public IEnumerable<int> DataList { get; set; } } 在Controler中透過ViewBag，傳入一個MultiSelectList public ActionResult Index() { this.ViewBag.DataList = new MultiSelectList( new List<SelectListItem>() { new SelectListItem{ Text="aaa", Value="1"}, new SelectListItem{ Text="bbb", Value="2"}, new SelectListItem{ Text="ccc", Value="3"}, }, "Value", "Text"); return View(); } 在View中透過@Html.ListBoxFor輸出下拉選單
@using WebApplication1.ViewModels @model HomeModel @{ ViewBag.Title = "Index"; } <h2>Index</h2>
<div class="form-horizontal”> <div class="form-group”> @Html.LabelFor(x => x.DataList, new { @class = “col-md-2 label-control” }) <div class="col-md-10”> @Html.