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 中的类
Oct 09 PHP
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
Mar 28 PHP
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程
Aug 23 PHP
php使用curl简单抓取远程url的方法
Mar 13 PHP
php有效防止同一用户多次登录
Nov 19 PHP
CI框架文件上传类及图像处理类用法分析
May 18 PHP
Yii2基于Ajax自动获取表单数据的方法
Aug 10 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
Aug 17 PHP
php strftime函数获取日期时间(switch用法)
May 16 PHP
使用PHPWord生成word文档的方法详解
Jun 06 PHP
PHP实现获取文件mime类型多种方法解析
May 28 PHP
TP3.2框架分页相关实现方法分析
Jun 03 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监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
如何判断php mysqli扩展类是否开启
2016/12/24 PHP
JS小框架 fly javascript framework
2009/11/26 Javascript
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
jquery表单验证使用插件formValidator
2012/11/10 Javascript
js调用css属性写法
2013/09/21 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
详解javascript遍历方式
2015/11/11 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
微信小程序 教程之wxapp 视图容器 view
2016/10/19 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
Vue项目中ESlint规范示例代码
2019/07/04 Javascript
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
Python中static相关知识小结
2018/01/02 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
Charles & Colvard官网:美国莫桑石品牌
2019/06/05 全球购物
配件采购员岗位职责
2013/12/03 职场文书
执行力心得体会
2013/12/31 职场文书
小区文明倡议书
2014/05/16 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
大学班长竞选稿
2015/11/20 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python