Select2插件的快速使用-白红宇

Select2插件的快速使用

阅读量：3701 次

发布时间：2019-05-21

本文共 714 字，大约阅读时间需要 2 分钟。

前言

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

select2的安装详情请看官方文档介绍的配置方式：

增加时的使用

1、引入js和css

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

例：

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");

测试效果

遇到其他问题会继续更新

转载地址：http://llpcn.baihongyu.com/

你可能感兴趣的文章