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 5.0对象模型深度探索之绑定
Sep 05 PHP
PHP编码规范-php coding standard
Mar 16 PHP
discuz authcode 经典php加密解密函数解析
Jul 12 PHP
mayfish 数据入库验证代码
Apr 30 PHP
php中利用str_pad函数生成数字递增形式的产品编号
Sep 30 PHP
PHP防止表单重复提交的几种常用方法汇总
Aug 19 PHP
PHP中require和include路径问题详解
Dec 25 PHP
php使用mysqli向数据库添加数据的方法
Mar 20 PHP
TP5框架简单登录功能实现方法示例
Oct 31 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
May 27 PHP
详解PHP中的8个魔术常量
Jul 06 PHP
Laravel Reponse响应客户端示例详解
Sep 03 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
网页游戏开发入门教程二(游戏模式+系统)
2009/11/02 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
PHP面向对象程序设计之对象克隆clone和魔术方法__clone()用法分析
2019/06/12 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
Javascript 强制类型转换函数
2009/05/17 Javascript
jquery JSON的解析方式
2009/07/25 Javascript
js 数据类型转换总结笔记
2011/01/17 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
javascript cookie的简单应用
2016/02/24 Javascript
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
利用Webpack实现小程序多项目管理的方法
2019/02/25 Javascript
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
Python缩进和冒号详解
2016/06/01 Python
python3制作捧腹网段子页爬虫
2017/02/12 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
Django实现表单验证
2018/09/08 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
Emma Bridgewater官网:英国餐具制造商
2019/11/24 全球购物
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
门诊挂号室室长岗位职责
2013/11/27 职场文书
syb养殖创业计划书
2014/01/09 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
JS监听Esc 键触发事键
2021/04/14 Javascript
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript