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 相关文章推荐
NT IIS下用ODBC连接数据库
Oct 09 PHP
PHP register_shutdown_function函数的深入解析
Jun 03 PHP
php使用curl检测网页是否被百度收录的示例分享
Jan 31 PHP
php无限遍历文件夹示例分享
Mar 04 PHP
php分页示例分享
Apr 30 PHP
php与flash as3 socket通信传送文件实现代码
Aug 16 PHP
Symfony学习十分钟入门经典教程
Feb 03 PHP
微信 getAccessToken方法详解及实例
Nov 23 PHP
PHP文件与目录操作示例
Dec 24 PHP
PHP实现根据数组的值进行分组的方法
Apr 20 PHP
windows下的WAMP环境搭建图文教程(推荐)
Jul 27 PHP
php实现文件上传基本验证
Mar 04 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
网络资源
2006/10/09 PHP
php通过COM类调用组件的实现代码
2012/01/11 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
Zend Framework教程之Zend_Config_Ini用法分析
2016/03/23 PHP
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
2009/11/24 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
AngularJS改变元素显示状态
2017/04/20 Javascript
Angular在模板驱动表单中自定义校验器的方法
2017/08/09 Javascript
Angular5集成eventbus的示例代码
2018/07/19 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
Python实现全局变量的两个解决方法
2014/07/03 Python
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
python中随机函数random用法实例
2015/04/30 Python
linux安装python修改默认python版本方法
2019/03/31 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
计算机通信专业推荐信
2014/02/22 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
文明倡议书范文
2014/04/15 职场文书
放假通知怎么写
2015/08/18 职场文书
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python
Win11 引入 Windows 365 云操作系统,适应疫情期间混合办公模式:启动时直接登录、模
2022/04/06 数码科技
python Tkinter模块使用方法详解
2022/04/07 Python