使用select2 實現select多選與初始化數據。

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

先引入上面的js 和 css

 

簡單說一下，在進入這個頁面的時候，傳入了兩個參數，一個是商品的信息（信息裏有該商品已選好的分類），一個是商品全部的分類。

 

下面的select開始是下拉選框。使用 jQuery   $("#sel_menu2").select2({ tags: true, });  來讓他變成多選框。

 

外層循環了商品的信息（在這裏只是循環了分類，商品其餘信息再也不這裏循環）

 

裏面使用了foreach循環拿到每一個option（也就是全部的分類）。

 

而後裏面的循環進行的時候 判斷，商品的選中分類，在全部的分類裏面，那麼給這個 option 一個 select 的屬性，這樣就能夠在編輯頁面看到多個已經選過的 option。

 

在下邊有個 隱藏的 input ，這個是用來存儲獲取到的全部編輯修改後的分類的值。存儲到input 的value 裏面，表單提交後再後臺進行這些分類處理。

<div class="row" style="padding: 0px 10px 20px;border-bottom: 1px solid #eee;">
　　<p class="">分類：</p>
　　　　@foreach($item as $key=>$value)

　　　　　　<select id="sel_menu2" multiple="multiple" class="form-control" name="item[category][{{ $key }}]">
          @foreach($custom_category as $c_key=>$c_value)
            <option value ="{{ $c_value['_id'] }}" @if(in_array($c_value['_id'], $value)) selected @endif>{{ $c_value['name'] }}</option>
          @endforeach
          </select>

          <p><input type="hidden" id="category" name="category" style="width:300px" value="brown, red, green"/></p>
       @endforeach
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $("#sel_menu2").select2({
            tags: true,
        });
    });

    function category_get()
    {
        var category = $('#sel_menu2').val();
        $("#category").attr('value', category);
    }

</script>

 

進入頁面後是這個樣子