Select2插件的快速使用

前言

这里简单的介绍select2多选下拉框的功能，我们平常的使用的场景就是增加时的选择和修改时的回显，那么这里就针对这两个用法，进行快速入门。

select2的安装详情请看官方文档介绍的配置方式：https://select2.org/getting-started/installation

增加时的使用

1、引入js和css

<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

2、在你的select标签上面加上multiple属性
例：

<select id="brandId" name="brand" style="width:100%" multiple>
	<option value="1">华为</option>
	<option value="2">联想</option>
	<option value="3">三星</option>
	<option value="4">小米</option>
</select>

3、js脚本
例：

$(function(){
	$("#brandId").select2();
})

4、这就搞定了

如何获取选中的option

只需一步

var brands = $("#brandId").select2('data');

这就搞定了，你可以通过brands遍历出来所选的option元素对象，怎么取元素里的值就不说了

如何回显选中的option

回显时select中要有你需要回显的option
比如我从后台查到我刚刚选择了联想和三星这两条数据，并将这个List集合返回到了前端页面，数据格式为[{id:1,text:“联想”},{id:2,text:“华为”}]，集合名称为data
那么我们可以这样去进行回显

var ids = [];    //存储需要回显数据的id数组
$(data).each(function(i,e){	//将后台传递的所选数据集合遍历
    ids.push(e.id);
})
//这个时候我们要回回显数据所对应的id数组准备好了
//然后直接回显
//第一个是你select标签的id，第二个是准备的id数组，第三个无需改动
$("#brandId2").val(ids).trigger("change");

遇到其他问题会继续更新