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 array的学习笔记
May 10 PHP
php实现数组筛选奇数和偶数示例
Apr 11 PHP
初识Laravel
Oct 30 PHP
学习php设计模式 php实现原型模式(prototype)
Dec 07 PHP
Linux系统下使用XHProf和XHGui分析PHP运行性能
Dec 08 PHP
PHP解压tar.gz格式文件的方法
Feb 14 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
Oct 08 PHP
PHP7多线程搭建教程
Apr 21 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
Nov 21 PHP
php实现 master-worker 守护多进程模式的实例代码
Jul 20 PHP
laravel按天、按小时,查询数据的实例
Oct 09 PHP
Laravel 实现添加多语言提示信息
Oct 25 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数组(array)输出的三种形式详解
2013/06/05 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
php可生成缩略图的文件上传类实例
2014/12/17 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
jQuery防止重复绑定事件的解决方法
2016/05/14 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
Jquery EasyUI $.Parser
2017/06/02 jQuery
基于构造函数的五种继承方法小结
2017/07/27 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
Python搭建代理IP池实现获取IP的方法
2019/10/27 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
GoPro摄像机美国官网:美国运动相机厂商
2018/07/03 全球购物
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
美国优质马术服装购买网站:Breeches.com
2019/12/16 全球购物
应征英语教师求职信
2013/11/27 职场文书
高考备战决心书
2014/03/11 职场文书
副董事长岗位职责
2014/04/02 职场文书
自强之星事迹材料
2014/05/12 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
南京大屠杀观后感
2015/06/02 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL