快捷導(dǎo)航

laravel框架select2多選插件初始化默認(rèn)選中項(xiàng)操作示例

更新時(shí)間：2020年02月18日 09:22:58 作者：懷素真

這篇文章主要介紹了laravel框架select2多選插件初始化默認(rèn)選中項(xiàng)操作,結(jié)合實(shí)例形式分析了laravel框架select2多選插件的基本初始化、設(shè)置默認(rèn)選中項(xiàng)等相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了laravel框架select2多選插件初始化默認(rèn)選中項(xiàng)操作。分享給大家供大家參考，具體如下：

項(xiàng)目中有發(fā)送消息功能，需要能通過(guò)搜索，多選用戶(hù)，來(lái)指定發(fā)送人。使用 select2 插件來(lái)完成。

select2 的 html 代碼如下：

<div class="form-group" id="member_group">
  <label class="col-lg-3 control-label required">選擇用戶(hù)
  <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 代碼如下：

//選擇用戶(hù)
$("#member_select").select2({
  ajax: {
    //請(qǐng)求的URL
    url: "{{ route('member.index') }}",
    //返回的數(shù)據(jù)類(lèi)型
    dataType: "json",
    //延遲時(shí)間，毫秒
    delay: 500,
    //是否緩存
    cache: true,
    //查詢(xún)數(shù)據(jù)
    data: function (params) {
      //params.term就是你搜索輸入的參數(shù)
      return {
        search: params.term,
        page: params.page || 1
      };
    },
    //請(qǐng)求結(jié)果回調(diào)函數(shù)，data就是后端返回的數(shù)據(jù)
    processResults: function (data, params) {
      var data = data.data;
      var results = [];
      //循環(huán)數(shù)據(jù)，將數(shù)據(jù)壓入results中
      //注意數(shù)據(jù)必須要有二個(gè)屬性，id和text，分別對(duì)應(yīng)option的value和文本
      //網(wǎng)上有些說(shuō)無(wú)法選中元素，請(qǐng)先檢查這里，你是否設(shè)置了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: '選擇用戶(hù)',
  //是否多選
  multiple: true,
  allowClear: true
});

后端返回的數(shù)據(jù)如下，直接使用 laravel 的 paginate() 方法返回分頁(yè)數(shù)據(jù)。

{
  "status_code":200,
  "message":"查詢(xún)成功",
  "data":{
    "current_page":1,
    "data":[
      {
        "id":2006,
        "name":"用戶(hù)1"
      },
      {
        "id":2005,
        "name":"用戶(hù)3"
      },
      {
        "id":2004,
        "name":"用戶(hù)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
  }
}

在編輯消息時(shí)，我們需要查看，這條消息發(fā)送給了哪些人，這就需要進(jìn)入編輯頁(yè)面時(shí)，讓 select2 默認(rèn)選中用戶(hù)。

網(wǎng)上說(shuō)通過(guò)如下方法可以選中。

$("#spread_select").val([1, 2]).trigger("change");

但是我們這里select2的option是通過(guò)ajax動(dòng)態(tài)加載的，剛進(jìn)頁(yè)面時(shí)，select2的ajax根本沒(méi)有觸發(fā)，導(dǎo)致select2中沒(méi)有option元素，更無(wú)法被選中。

我們通過(guò)下面的方式，來(lái)實(shí)現(xiàn)默認(rèn)選中。

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中的數(shù)據(jù)，可以通過(guò)PHP后端生成好后，渲染到頁(yè)面，然后通過(guò)JSON.parse()解析成JSON對(duì)象。

更多關(guān)于Laravel相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《Laravel框架入門(mén)與進(jìn)階教程》、《php優(yōu)秀開(kāi)發(fā)框架總結(jié)》、《php面向?qū)ο蟪绦蛟O(shè)計(jì)入門(mén)教程》、《php+mysql數(shù)據(jù)庫(kù)操作入門(mén)教程》及《php常見(jiàn)數(shù)據(jù)庫(kù)操作技巧匯總》

希望本文所述對(duì)大家基于Laravel框架的PHP程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: