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 相关文章推荐
BBS(php &amp; mysql)完整版(三)
Oct 09 PHP
php max_execution_time执行时间问题
Jul 17 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
Oct 23 PHP
php删除与复制文件夹及其文件夹下所有文件的实现代码
Jan 23 PHP
php使用qr生成二维码的示例分享
Jan 20 PHP
php实现给图片加灰色半透明效果的方法
Oct 20 PHP
php创建session的方法实例详解
Jan 27 PHP
PHP中__autoload和Smarty冲突的简单解决方法
Apr 08 PHP
Yii数据读取与跳转参数传递用法实例分析
Jul 12 PHP
实例讲解通过​PHP创建数据库
Jan 20 PHP
PHP实现字母数字混合验证码功能
Jul 11 PHP
PHP字符串和十六进制如何实现互相转换
Jul 16 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
shell脚本作为保证PHP脚本不挂掉的守护进程实例分享
2013/07/15 PHP
php 购物车完整实现代码
2014/06/05 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
2020/08/14 Javascript
python模拟Django框架实例
2016/05/17 Python
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
python中reader的next用法
2018/07/24 Python
numpy基础教程之np.linalg
2019/02/12 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
pygame实现五子棋游戏
2019/10/29 Python
python实现图片插入文字
2019/11/26 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
简单了解Python多态与属性运行原理
2020/06/15 Python
英国护发和美妆在线商店:Klip Shop
2019/03/24 全球购物
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
外语系大学生自荐信范文
2014/03/01 职场文书
村道德模范事迹材料
2014/08/28 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
党员教师群众路线个人整改措施
2014/10/28 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
警示教育观后感
2015/06/17 职场文书
小学班级管理心得体会
2016/01/07 职场文书
调解协议书范本
2016/03/21 职场文书