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中Collection 类的设计
Jun 21 PHP
php实现aes加密类分享
Feb 16 PHP
PHP zip扩展Linux下安装过程分享
May 05 PHP
采用ThinkPHP中F方法实现快速缓存实例
Jun 13 PHP
教你如何开启shopnc b2b2c 伪静态
Oct 21 PHP
使用PHPMailer实现邮件发送代码分享
Oct 23 PHP
使用新浪微博API的OAuth认证发布微博实例
Mar 27 PHP
Laravel接收前端ajax传来的数据的实例代码
Jul 20 PHP
JSON PHP中,Json字符串反序列化成对象/数组的方法
May 31 PHP
TP5框架安全机制实例分析
Apr 05 PHP
Laravel框架下的Contracts契约详解
Mar 17 PHP
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
Apr 01 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 和 COM
2006/10/09 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
php集成环境xampp中apache无法启动问题解决方案
2014/11/18 PHP
php针对cookie操作的队列操作类实例
2014/12/10 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
2010/04/15 Javascript
JS重要知识点小结
2011/11/06 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
Jquery结合HTML5实现文件上传
2015/06/25 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
深入了解js原型模式
2019/05/30 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
python编程羊车门问题代码示例
2017/10/25 Python
python监控键盘输入实例代码
2018/02/09 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
python 字段拆分详解
2019/12/17 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
Python 利用flask搭建一个共享服务器的步骤
2020/12/05 Python
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
药物学专业学生的自我评价
2013/10/27 职场文书
教师辞职报告范文
2014/01/20 职场文书
大四优秀党员个人民主评议
2014/09/19 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
基石观后感
2015/06/12 职场文书
参加招聘会后的感想
2015/08/10 职场文书