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

 更新时间:2020年02月18日 09:22:58   作者:怀素真  
这篇文章主要介绍了laravel框架select2多选插件初始化默认选中项操作,结合实例形式分析了laravel框架select2多选插件的基本初始化、设置默认选中项等相关操作技巧,需要的朋友可以参考下

本文实例讲述了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相关内容感兴趣的读者可查看本站专题:《Laravel框架入门与进阶教程》、《php优秀开发框架总结》、《php面向对象程序设计入门教程》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总

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

相关文章

  • ThinkPHP的常用配置选项汇总

    ThinkPHP的常用配置选项汇总

    这篇文章主要介绍了ThinkPHP的常用配置选项,详细汇总了ThinkPHP配置文件中经常用到的配置项极其具体含义与作用,需要的朋友可以参考下
    2016-03-03
  • php-fpm配置详解

    php-fpm配置详解

    这篇文章主要介绍了php-fpm配置详解,需要的朋友可以参考下
    2014-02-02
  • Laravel 5.4中migrate报错: Specified key was too long error的解决

    Laravel 5.4中migrate报错: Specified key was too long error的解决

    今天在执行laravel migrate时出现异常,找了好半天才找到问题所在,所以这篇文章主要给大家介绍了关于Laravel 5.4中migrate报错: Specified key was too long error的解决方法,需要的朋友可以参考下。
    2017-11-11
  • php 读取输出其他文件的实现方法

    php 读取输出其他文件的实现方法

    下面小编就为大家带来一篇php 读取输出其他文件的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法

    ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法

    这篇文章主要介绍了ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法,涉及thinkPHP针对数据表的查询与遍历操作相关实现技巧,需要的朋友可以参考下
    2016-11-11
  • 提高php编程效率技巧

    提高php编程效率技巧

    php是全球范围应用范围最广的开发语言,php和linux、apache、mysql紧密结合,形成了lamp的开源黄金搭档。因其php具有开发周期短、免费、稳定、安全、简单易学、跨平台等优势,被评为最受欢迎的编程语言,下面小编给大家整理了提高php编程效率的20个要点,需要的可以参考
    2015-08-08
  • PHP队列场景以及实现代码实例详解

    PHP队列场景以及实现代码实例详解

    这篇文章主要介绍了PHP队列场景以及实现代码实例详解,有感兴趣的同学可以跟着学习研究下
    2021-02-02
  • tp5(thinkPHP5框架)使用DB实现批量删除功能示例

    tp5(thinkPHP5框架)使用DB实现批量删除功能示例

    这篇文章主要介绍了tp5(thinkPHP5框架)使用DB实现批量删除功能,结合实例形式分析了thinkPHP5前端视图界面数据交互及后台使用DB处理数据库删除的相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • php中对内置函数json_encode和json_decode的异常处理

    php中对内置函数json_encode和json_decode的异常处理

    这篇文章主要介绍了php中对内置函数json_encode和json_decode的异常处理,本篇文章通过定义描述和列举表格以及最后代码的展示,以下就是详细内容,需要的朋友可以参考下
    2021-07-07
  • 在PHP8中向数组添加元素的常用方法

    在PHP8中向数组添加元素的常用方法

    这篇文章主要介绍了在PHP8中向数组添加元素的常用方法,在这里主要讲解几个常用的方法:使用方括号[]添加元素、使用array_unshift()函数,向数组的头部添加元素、使用array_push()函数,向数组的尾部添加元素、使用array_splice()函数添加元素,需要的朋友可以参考下
    2023-09-09

最新评论