Select2使用实例

Posted 2020-10-05 求知若饥,虚心若愚

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

2、样式

　　<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" />

3、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

4、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();//序列化
/

5、对象字段接收

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