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 mkdir()定义和用法
Jan 14 PHP
PHP 函数学习简单小结
Jul 08 PHP
将一维或多维的数组连接成一个字符串的php代码
Aug 08 PHP
深入理解PHP中的Session和Cookie
Jun 21 PHP
用 Composer构建自己的 PHP 框架之基础准备
Oct 30 PHP
php实现的css文件背景图片下载器代码
Nov 11 PHP
php处理带有中文URL的方法
Jul 11 PHP
Yii2基于Ajax自动获取表单数据的方法
Aug 10 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
Sep 01 PHP
php将服务端的文件读出来显示在web页面实例
Oct 31 PHP
PHP对象的浅复制与深复制的实例详解
Oct 26 PHP
php基于协程实现异步的方法分析
Jul 17 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
php 函数中静态变量使用的问题实例分析
Mar 05 #PHP
php多进程中的阻塞与非阻塞操作实例分析
Mar 04 #PHP
php 中的信号处理操作实例详解
Mar 04 #PHP
You might like
PHP 递归效率分析
2009/11/24 PHP
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
javascript中递归函数用法注意点
2015/07/30 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
详解vue-cli构建项目反向代理配置
2017/09/07 Javascript
vue iview实现动态新增和删除
2020/06/17 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
Python3 入门教程 简单但比较不错
2009/11/29 Python
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
基于python时间处理方法(详解)
2017/08/14 Python
Python使用Matplotlib实现雨点图动画效果的方法
2017/12/23 Python
Python for循环中的陷阱详解
2018/07/13 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
Python hashlib模块实例使用详解
2019/12/24 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
德国排名第一的主题公园门票网站:Attraction Tickets Direct
2019/09/09 全球购物
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
人力资源管理专业学生自我评价
2013/11/20 职场文书
大学校园毕业自我鉴定
2014/01/15 职场文书
士力架广告词
2014/03/20 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
人力资源管理毕业求职信
2014/08/05 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
暑期工社会实践报告
2015/07/13 职场文书
创业计划书之面包店
2019/09/12 职场文书
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB
Django基础CBV装饰器和中间件
2022/03/22 Python
海弦WR-800F
2022/04/05 无线电
maven 解包依赖项中的文件的解决方法
2022/07/15 Java/Android