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 数组实例说明
Aug 18 PHP
为IP查询添加GOOGLE地图功能的代码
Aug 08 PHP
解决PHP超大文件下载,断点续传下载的方法详解
Jun 06 PHP
深入PHP内存相关的功能特性详解
Jun 08 PHP
php实现水仙花数示例分享
Apr 03 PHP
Linux下创建nginx脚本-start、stop、reload…
Aug 03 PHP
php读取目录及子目录下所有文件名的方法
Oct 20 PHP
PHP中Session和Cookie是如何操作的
Oct 10 PHP
Yii2.0高级框架数据库增删改查的一些操作
Nov 16 PHP
详解在YII2框架中使用UEditor编辑器发布文章
Nov 02 PHP
laravel框架与其他框架的详细对比
Oct 23 PHP
php中try catch捕获异常实例详解
Aug 06 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 session常见问题集锦及解决办法总结
2007/03/18 PHP
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
JavaScript window.setTimeout() 的详细用法
2009/11/04 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
2014/01/17 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
微信小程序开发教程之增加mixin扩展
2017/08/09 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
vue使用websocket的方法实例分析
2019/06/22 Javascript
Vue实现页面添加水印功能
2019/11/09 Javascript
JS实现多功能计算器
2020/10/28 Javascript
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
[01:32]2016国际邀请赛中国区预选赛IG战队首日赛后采访
2016/06/27 DOTA
python使用chardet判断字符串编码的方法
2015/03/13 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
对python:threading.Thread类的使用方法详解
2019/01/31 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
Django REST 异常处理详解
2020/07/15 Python
html5画布旋转效果示例
2014/01/27 HTML / CSS
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
中国第一家杂志折扣订阅网:杂志铺
2016/08/30 全球购物
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
社团活动总结书
2014/06/27 职场文书
人事文员岗位职责
2015/02/04 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
话题作文之自信作文
2019/11/15 职场文书
python 实现的截屏工具
2021/05/08 Python
P站美图推荐——变身女主角特辑
2022/03/20 日漫