laravel框架select2多选插件初始化默认选中项操作示例


Posted in PHP onFebruary 18, 2020

本文实例讲述了laravel框架select2多选插件初始化默认选中项操作。分享给大家供大家参考,具体如下:

项目中有发送消息功能,需要能通过搜索,多选用户,来指定发送人。使用 select2 插件来完成。

select2 的 html 代码如下:

<div class="form-group" id="member_group">
  <label class="col-lg-3 control-label required">选择用户
  <span class="required">*</span>
  </label>
  <div class="col-lg-4">
  <select class="form-control" name="user_id[]" id="member_select" multiple="multiple"></select>
  </div>
</div>

select2 的 js 代码如下:

//选择用户
$("#member_select").select2({
  ajax: {
    //请求的URL
    url: "{{ route('member.index') }}",
    //返回的数据类型
    dataType: "json",
    //延迟时间,毫秒
    delay: 500,
    //是否缓存
    cache: true,
    //查询数据
    data: function (params) {
      //params.term就是你搜索输入的参数
      return {
        search: params.term,
        page: params.page || 1
      };
    },
    //请求结果回调函数,data就是后端返回的数据
    processResults: function (data, params) {
      var data = data.data;
      var results = [];
      //循环数据,将数据压入results中
      //注意数据必须要有二个属性,id和text,分别对应option的value和文本
      //网上有些说无法选中元素,请先检查这里,你是否设置了id,并且不为空
      $(data.data).each(function (i, obj) {
        results.push({
          id: obj.id,
          text: obj.name
        });
      });
      return {
        results: results,
        pagination: {
          more: (data.current_page * data.per_page) < data.total
        }
      };
    }
  },
  placeholder: '选择用户',
  //是否多选
  multiple: true,
  allowClear: true
});

后端返回的数据如下,直接使用 laravel 的 paginate() 方法 返回分页数据。

{
  "status_code":200,
  "message":"查询成功",
  "data":{
    "current_page":1,
    "data":[
      {
        "id":2006,
        "name":"用户1"
      },
      {
        "id":2005,
        "name":"用户3"
      },
      {
        "id":2004,
        "name":"用户3"
      }
    ],
    "first_page_url":"http://test.me/member/index?page=1",
    "from":1,
    "last_page":1,
    "last_page_url":"http://test.me/member/index?page=1",
    "next_page_url":"http://test.me/member/index?page=1",
    "path":"http://test.me/member/index",
    "per_page":1,
    "prev_page_url":null,
    "to":null,
    "total":3
  }
}

在编辑消息时,我们需要查看,这条消息发送给了哪些人,这就需要进入编辑页面时,让 select2 默认选中用户。

网上说通过如下方法可以选中。

$("#spread_select").val([1, 2]).trigger("change");

但是我们这里select2的option是通过ajax动态加载的,刚进页面时,select2的ajax根本没有触发,导致select2中没有option元素,更无法被选中。

我们通过下面的方式,来实现默认选中。

var selObj = [
  {"id": 1, "name": "小徐"},
  {"id": 2, "name": "小张"},
  {"id": 3, "name": "小明"},
];
(function initSel(selObj) {
  if (selObj) {
    for (var ix = 0; ix < selObj.length; ix++) {
      var item = selObj[ix];
      var option = new Option(item.name, item.id, true, true);
      $("#member_select").append(option);
    }
    $("#member_select").trigger('change');
  }
})(selObj);

selObj中的数据,可以通过PHP后端生成好后,渲染到页面,然后通过JSON.parse()解析成JSON对象。

希望本文所述对大家基于Laravel框架的PHP程序设计有所帮助。

PHP 相关文章推荐
一些PHP写的小东西
Dec 06 PHP
两个强悍的php 图像处理类1
Jun 15 PHP
网页游戏开发入门教程二(游戏模式+系统)
Nov 02 PHP
PHP5 字符串处理函数大全
Mar 23 PHP
AJAX的跨域访问-两种有效的解决方法介绍
Jun 22 PHP
PHP5各个版本的新功能和新特性总结
Mar 16 PHP
php准确获取文件MIME类型的方法
Jun 17 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
Nov 19 PHP
使用PHP实现微信摇一摇周边红包
Jan 04 PHP
Yii使用smsto短信接口的函数demo示例
Jul 13 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
Feb 07 PHP
PHP实现抽奖功能实例代码
Jun 30 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
Feb 18 #PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
Feb 16 #PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
Feb 15 #PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
Feb 15 #PHP
laravel框架使用极光推送消息操作示例
Feb 15 #PHP
laravel框架使用阿里云短信发送消息操作示例
Feb 15 #PHP
laravel框架实现敏感词汇过滤功能示例
Feb 15 #PHP
You might like
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
PHP变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
基于jquery实现省市联动效果
2015/11/23 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
Python实现按照指定要求逆序输出一个数字的方法
2018/04/19 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
简单了解Django ORM常用字段类型及参数配置
2020/01/07 Python
Python实现像awk一样分割字符串
2020/09/15 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
Python 列表反转显示的四种方法
2020/11/16 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
全球立体声:World Wide Stereo
2018/09/29 全球购物
销售高级职员求职信
2013/10/29 职场文书
企业门卫岗位职责
2013/12/12 职场文书
如何写你的创业计划书
2014/01/07 职场文书
骨干教师培训制度
2014/01/13 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
计划生育证明格式范本
2014/09/12 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
初中政治教学工作总结
2015/08/13 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js