原

使用select2实现下拉框中显示图片

14414人阅读 2019/4/25 15:58 总访问：143320 评论：3 收藏：0 手机

分类: 前端

使用select2插件需要引用select2.min.js、select2.min.css文件

1、CDN引用方式：

2、下载文件后本地引用（手动安装）

下载地址：https://github.com/select2/select2/tags

select2依赖于jQuery选择器，所以还得引入jQuery

官网推荐使用CDN，虽然这样的引用方式容易部属和更新还节约流量，但是不能做一些定制化的操作，比如修改提示，具体看个人需求。

select2 有两种数据集填充方式：固定方式获取（页面写死）和远程方式获取（select2内置了ajax）

Select2将自己注册为jQuery函数，因此您可以调用.select2()在任何你想初始化Select2的jQuery选择器上。

一、固定方式：

html代码：

<body style="margin-left:2%">
    <div>
    <h2><label>固定方式获取</label></h2>
        <p>
            <label>单选：</label>
            <select class="form-control" style="width: 50%" id="sel_1">
                <option value="root">ROOT</option>
                <option value="aojiancc">傲剑</option>
                <option value="huangleicc">黄磊</option>
            </select>
        </p>
        <p>
            <label>分组多选：</label>
            <select class="form-control" style="width: 50%" multiple="multiple" id="sel_2">
                <optgroup label="管理员">
                    <option value="root">ROOT</option>
                </optgroup>
                <optgroup label="用户">
                    <option value="aojiancc">傲剑</option>
                    <option value="huangleicc">黄磊</option>
                </optgroup>
            </select>
        </p>
        <p>
            <label>图文结合：</label>
            <select class="js-example-templating js-states form-control" style="width: 50%" multiple="multiple" id="sel_3">
                <optgroup label="管理员">
                    <option value="root">ROOT</option>
                </optgroup>
                <optgroup label="用户">
                    <option value="aojiancc">傲剑</option>
                    <option value="huangleicc">黄磊</option>
                </optgroup>
            </select>
        </p>
    </div>
</body>

JS代码：

<script>
    //单选
    $(document).ready(function () {
        $('#sel_1').select2();
            
         //设置最多能够选择的个数
         $("#sel_2").select2({
            tags: true,
            placeholder: '请选择',
            maximumSelectionLength: 2 //最多能够选择的个数
         });

         //带图片
         $("#sel_3").select2({
             placeholder: '请选择',
             templateResult: formatStateResult,//选择时
             templateSelection: formatStateSelection//选择后
         });
            
     });
     //填充图片
     function formatStateResult(state) {
         if (!state.id) { return state.text; }
         var $state = $(
             '<span><img src="/img/a5.jpg" style="width: 5%;height:5%" class="img-flag" /> ' + state.text + '</span>'
         );
         return $state;
     };
     function formatStateSelection(state) {
         if (!state.id) { return state.text; }
         var $state = $(
             '<span><img src="/img/a5.jpg" style="width: 10%;height:10%" class="img-flag" /> ' + state.text + '</span>'
         );
         return $state;
     };
</script>

效果：

单选：

二、ajax获取方式（以最复杂的分页多选且显示图片为例）：

html代码：

<body style="margin-left:2%">
    <div>
        <h2><label>远程方式获取</label></h2>
        <p>
            <label>图文结合：</label>
            <select class="js-example-data-ajax js-states form-control" style="width: 50%" multiple="multiple" id="sel_4">
                <option></option>
            </select>
        </p>
    </div>
</body>

JS代码：

<script>
$(document).ready(function () {
	$("#sel_4").select2({
		ajax: {
			url: '/ExportExcel/GetPageListJson',
			dataType: 'json',
			delay: 1000,// 搜索延迟显示
			//data：参数
			data: function (params) {
				return {
					LikeVar: params.term, // 搜索框值
					page: params.page || 1,//分页，当前页
					rows: 2//每页容量

				};
			},
			//数据集处理
			processResults: function (data, params) {
			    params.page = params.page  || 1;
			    return {
			        //这里是返回的数据：数据格式必须遵循select2格式 如：{ id: 1, text: 'aojian' }, { id: 2, text: 'dahuang' }];
				results: data.rows,
				pagination: {
				    //more：表示下拉刷新，data.total表示总页数，这里的意思是当前页小于总页数的时候就显示下拉分页
				    more: (params.page) < data.total
        			}
			    };
			},
			cache: true
		},
		placeholder: '请选择',//默认文字提示
		language: "zh-CN",//语言
		tags: true,//允许手动添加
		allowClear: true,//允许清空
		escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
		minimumInputLength: 1,//输入几个字符后开始查询，1：表示一个字符
		templateResult: formatRepoProvince, //显示的结果集格式，这里需要自己写css样式
		templateSelection: formatRepoProvince //选择某一项后显示到文本框的内容
	});

	//$("#sel_4").trigger('change');//使用append拼接时需重新渲染
});
//编写样式
function formatRepoProvince(repo) {
	console.log(repo);
	if (repo.loading) return repo.text;
	var imgs = repo.img;
	imgs = imgs.substring(1, imgs.length);
	var markup = '<span><img src="' + imgs + '" style="width: 5%;height:5%" class="img-flag"/> ' + repo.text + '</span>';
	return markup;
}
</script>

效果：

设置默认值：

$('#sel_4').val(['2']).trigger('change');//其中2是id或者value的值，是list格式。change是固定值

后台代码有很多自己的逻辑的封装就不贴出来了，其他的样式调整和一些细节也不列出来了，想要深入了解的可以去官网查看官方文档

地址：https://select2.org/

👈使用NPOI导出excel（包括图片）

👉腾讯防水墙

评价

饰心

2019/4/25 16:03:34

嗯~刚好差不多下班 [哈欠]

剑轩:@饰心安逸这么早就下班了

2019/4/25 17:01:02 回复

剑轩

2019/4/25 17:00:43

秀啊.....，飞常不错

NET Core 使用 EF Code First

下面这些内容很老了看这篇：https://www.tnblog.net/aojiancc2/article/details/5365 项目使用多层，把数据库访问...

使用OLEDB读取不同版本Excel的连接字符串设置

使用OleBD读取excel的时候，excel不同的版本，连接字符串的写法也会不一样。///<summary> ///读取excel ///</su...

C 使用CancellationTokenSource取消多线程

有时间我们在使用多线程的时候，需要取消线程的执行，可以使用CancellationTokenSource来取消对Task开辟多线程的取消如下：...

使用爬虫刷csdn博客访问量

首先了解一下常见反爬虫的检测方法频率监测：有些网站会设置一种频率监测的机制，对于同一IP，若在一定时间内访问的速度超...

Idea下使用maven搭建SSM(一)：SpringMVC

Spring MVC是一款基于MVC架构模式的轻量级Web框架，其目的是将Web开发模块化，对整体架构进行解耦，简化Web开发流程。下面...

Idea下使用maven搭建SSM(二)：MyBatis

开发Web应用，数据的存储和处理往往离不开数据库和SQL语句。在使用Java开发的Web应用中，自然也少不了连接数据库的步骤。在...

使用微软自带语音合成类库

//引入语音合成名称空间 usingSystem.Speech.Synthesis; classA { voidtest1() { //实例化并指定字符串播放合成读音 ...

如何使用图标像使用文字一样，使用文本图标的方法

1.首先在Iconfont-阿里巴巴矢量图标库上面找到你需要的图标然后加入你的购物车然后选择图标；注意：每个类型的图标会大小不...

使用七牛云的cdn服务，提高图片的加载速度

CDN介绍CDN的全称是Content Delivery Network，即内容分发网络。CDN加速主要是加速静态资源，如网站上面上传的图片、媒体，...

.net core 使用session

tip:net core 2.2后可以直接启用session了，不用在自己添加一次session依赖，本身就添加了使用nuget添加引用Microsoft.AspN...

使用OutLook发送邮件

publicstaticvoidOutlook(stringSubject,stringTextBody,stringFromAdd,stringFromPass,stringTo,stringCC,List<string&...

SQL Server 中使用游标

--声明一个游标 DECLAREMyCursorCURSOR FORSELECTTOP5FBookName,FBookCodingFROMTBookInfo//定义一个叫MyCursor的游标，...

Windows使用wireshark抓包小心得

wireshrak是个网络抓包工具，常用。但是在数据较大的网络环境中直接使用软件抓包会导致wireshark卡死。为什么呢？网卡瞬间...

Oracle自定义函数的简单使用

一.最最最简单的返回一个数字的函数createorreplacefunctionfun_show returnint--申明返回值 as begin return1; end;...

Oracle事务的简单使用

事务：　　事务是一个整体,这些操作要么全部执行成功，要么全部不执行。使用事务的原因：保证数据的安全有效。事务的四个特...

Oracle使用游标

其实游标就是把查询的结果放入游标中，然后在去游标里边读取。相当于使用游标做了一个中转，而游标是可以作为参数进行传递...

饰心

Decorating heart

博主信息

排名

文章

粉丝

文章类别

C# 10篇

前端 3篇

VS插件 1篇