• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    laravel框架select2多选插件初始化默认选中项操作示例

    本文实例讲述了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相关内容感兴趣的读者可查看本站专题:《Laravel框架入门与进阶教程》、《php优秀开发框架总结》、《php面向对象程序设计入门教程》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》

    希望本文所述对大家基于Laravel框架的PHP程序设计有所帮助。

    您可能感兴趣的文章:
    • 关于laravel后台模板laravel-admin select框的使用详解
    • laravel-admin select框默认选中的方法
    • laravel-admin解决表单select联动时,编辑默认没选上的问题
    • 在Laravel中使用DataTables插件的方法
    • PHP框架Laravel插件Pagination实现自定义分页
    • 推荐几款用 Sublime Text 开发 Laravel 所用到的插件
    • Laravel框架表单验证详解
    • Laravel中使用FormRequest进行表单验证方法及问题汇总
    • Laravel 5框架学习之表单
    • Laravel实现表单提交
    • Laravel 5框架学习之表单验证
    • Laravel 5框架学习之子视图和表单复用
    上一篇:laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
    下一篇:laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    laravel框架select2多选插件初始化默认选中项操作示例 laravel,框架,select2,多选,