这个select2组件的功能确实很强大,可以将图片放入到select里面随着文字一起显示。
组件的下载地址以及API说明地址:
1、Select2使用示例地址: 、
2、Select2参数文档说明:
3、Select2源码:
效果图:
HTML代码:
@{ Layout = "~/Views/Shared/_Layout.cshtml";} @* *@ 默认 ---------------------------------------------------- 1、可搜索选项 ================================2、可搜索选项(有搜索关键字控制) ===============================3、多选 ===============================4、图文选项 ======================================5、默认选中某个选项 =========================================6、某些选项不能选中======================================7、搜索动态加载下拉选项功能(即在用户输入搜索内容时动态去后台取数据) =========================================
控制器action代码:
public class HomeController : Controller { public IEnumerable areaList = new List () { "北京市", "天津市", "重庆市", "上海市", "广州市", "长沙", "哈尔滨", "长春", "杭州市", "南京市", "福建市", "河北省", "山西省", "辽宁省", "吉林省", "黑龙江省", "江苏省", "浙江省", "安徽省", "福建省", "江西省", "山东省", "河南省", "湖北省", "湖南省", "广东省", "海南省", "四川省", "贵州省", "云南省", "陕西省", "甘肃省", "青海省", "台湾省", "内蒙古自治区", "广西壮族自治区", "西藏自治区", "宁夏回族自治区", "新疆维吾尔自治区", "香港特别行政区", "澳门特别行政区" }; public JsonResult GetArea(string q, string page) { var area = new { id = 1, name = "" }; var lstRes = areaList.Select((t, i) => new Area { id = i, text = t, element = "element" + i }); if (!string.IsNullOrEmpty(q.Trim())) { lstRes = lstRes.Where(x => x.text.Contains(q)); } var lstCurPageRes = string.IsNullOrEmpty(page) ? lstRes.Take(10) : lstRes.Skip(Convert.ToInt32(page) * 10 - 10).Take(10); return Json(new { items = lstCurPageRes, total_count = lstRes.Count() }, JsonRequestBehavior.AllowGet); } public ActionResult Index() { return View(); } }
namespace Select2Demo.Models{ public class Area { public int id { get; set; } public string text { get; set; } public string element { get; set; } }}
详细demo下载地址: http://pan.baidu.com/s/1qYvpzo4 密码:yvag