博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
bootstrap与Select2使用小结
阅读量:6821 次
发布时间:2019-06-26

本文共 10320 字,大约阅读时间需要 34 分钟。

这个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

转载于:https://www.cnblogs.com/linJie1930906722/p/6060370.html

你可能感兴趣的文章
简单的安卓应用授权认证(JNI)
查看>>
查看硬盘读取速率
查看>>
把匹配的小写转换成大写(\U、\u)
查看>>
【算法】最短路径之A*搜索
查看>>
【Android网络开发の5】Android中的网络数据下载
查看>>
linux终端使用python的matplotlib模块画图出现“could not open display”问题解决
查看>>
9月国内浏览器市场份额大战:IE份额上升至48.45%
查看>>
Tapestry 教程(五)实现Hi-Lo猜谜游戏
查看>>
2015年12月国内网民地域分布12强:湖北跻身上榜
查看>>
mysql-5.6安装
查看>>
LNMP环境搭建 Ubuntu篇
查看>>
设置低版本VDA注册高版本DDC
查看>>
multi-process script for ping host
查看>>
云数据库SQL Server 2008 R2版推出OSS版本数据上云
查看>>
Android 侵权案下周复审
查看>>
shell基础知识;
查看>>
RocketMQ源码分析之RocketMQ事务消息实现原理中篇----事务消息状态回查
查看>>
SQL使用中的优化
查看>>
2014年下半年信息系统项目管理师上午试题试题与答案 43
查看>>
centos版本查询
查看>>