Select2使用實例

一、List<Product> ProductList = ViewBag.ProductList as List<Product>; 

二、樣式

　　<link href="~/Content/assets/global/plugins/select2/css/select2.min.css" rel="stylesheet" />

　　<link href="~/Content/assets/global/plugins/select2/css/select2-bootstrap.min.css" rel="stylesheet" />

三、html　

<select tabindex="1" style="width:360px;" id="ProductIDs" name="ProductIDs" multiple="multiple">
@foreach (var item in ProductList)
{
<option value="@item.ProductID">
@item.ShortName
</option>
}
</select>

View Code

四、js引入及腳本

<script src="~/Content/assets/global/plugins/select2/js/select2.full.js"></script>
<script src="~/Content/assets/global/plugins/select2/js/select2.min.js"></script>

 $(function () {
            $("select").select2();
            var ProductIDs = new Array(@string.Join(",",m.ProductIDs));//綁定數據
            if (ProductIDs.length > 0) {
                $("#ProductIDs").select2('val', ProductIDs);
            }
}
var dataValues = jQuery("#thisForm").serialize();//序列化
/

五、對象字段接收

class{public List<int> ProductIDs {get;set;}}