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 相关文章推荐
ASP知识讲座四
Oct 09 PHP
追求程序速度,而不是编程的速度
Apr 23 PHP
PHP开发框架总结收藏
Apr 24 PHP
用PHP调用Oracle存储过程的方法
Sep 12 PHP
mac下使用brew配置环境的步骤分享
May 23 PHP
openflashchart 2.0 简单案例php版
May 21 PHP
PHP程序漏洞产生的原因分析与防范方法说明
Mar 06 PHP
PHP使用正则表达式获取微博中的话题和对象名
Jul 18 PHP
php fread读取文件注意事项
Sep 24 PHP
PHP7内核之Reference详解
Mar 14 PHP
TP5.0框架实现无限极回复功能的方法分析
May 04 PHP
PHP使用CURL实现下载文件功能示例
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
php 函数中静态变量使用的问题实例分析
Mar 05 #PHP
php多进程中的阻塞与非阻塞操作实例分析
Mar 04 #PHP
php 中的信号处理操作实例详解
Mar 04 #PHP
You might like
用PHP编写和读取XML的几种方式
2013/01/12 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
html读出文本文件内容
2007/01/22 Javascript
用js来解决ajax读取页面乱码
2010/11/28 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
2017/05/20 jQuery
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
2019/04/12 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
Vue实现日历小插件
2019/06/26 Javascript
javascript自定义日期比较函数用法示例
2019/07/22 Javascript
Layui实现带查询条件的分页
2019/07/27 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
前端性能优化建议
2020/09/17 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
一篇不错的Python入门教程
2007/02/08 Python
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
Python Django 命名空间模式的实现
2019/08/09 Python
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
关于教师节的广播稿
2014/09/10 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
员工自我工作评价
2015/03/06 职场文书
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python