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 相关文章推荐
漂亮但不安全的CTB
Oct 09 PHP
一个简单计数器的源代码
Oct 09 PHP
PHP+MySQL5.0中文乱码解决方法
Nov 20 PHP
php smarty的预保留变量总结
Dec 04 PHP
一个php Mysql类 可以参考学习熟悉下
Jun 21 PHP
php异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
May 19 PHP
PHP模板引擎Smarty的缓存使用总结
Apr 24 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
May 12 PHP
PHP实现判断数组是一维、二维或几维的方法
Feb 06 PHP
如何通过View::first使用Laravel Blade的动态模板详解
Sep 21 PHP
总结PHP代码规范、流程规范、git规范
Jun 18 PHP
PHP数组遍历的几种常见方式总结
Feb 15 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制作静态网站的模板框架(三)
2006/10/09 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
初识PHP中的Swoole
2016/04/05 PHP
微信公众号开发之文本消息自动回复php代码
2016/08/08 PHP
php插入含有特殊符号数据的处理方法
2016/11/24 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
AngularJS 指令详细介绍
2016/07/27 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
express express-session的使用小结
2018/12/12 Javascript
JS实现关闭小广告特效
2021/01/29 Javascript
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
详解python实现线程安全的单例模式
2018/03/05 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
Python 监测文件是否更新的方法
2019/06/10 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
pybind11在Windows下的使用教程
2019/07/04 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
Python grequests模块使用场景及代码实例
2020/08/10 Python
python opencv实现简易画图板
2020/08/27 Python
幼儿园感恩节活动方案2014
2014/10/11 职场文书
社区党建工作总结2015
2015/05/13 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android