Select2 does not work in adminLte + Laravel 5.8

Question

I added a Select2 on the page, but it does not load at all. Someone has already gone through this?

I implemented it like this:

Page: cadastrar.blade.php

<div class="box-body">
       <div class="col-md-12">
           <label for="Disciplinas">Disciplinas da Matriz Curricular</label>
                 <select class="js-example-basic-multiple" name="disciplinas[]" id="disciplinas" multiple="multiple">
                      @foreach($disciplinas as $disciplina)
                      <option value="{{ $disciplina->id_disciplina }}"> 
                               {{ $disciplina->nome }}</option>
                      @endforeach
                 </select>
        </div>
    </div>

    <script>
       $(function() {
           $('.js-example-basic-multiple').select2({
           placeholder: 'selecione'
           });
       });
   </script>

In the configuration file of Adminlte ta thus:

[
            'name' => 'Select2',
            'active' => true,
            'files' => [
                [
                    'type' => 'js',
                    'asset' => false,
                    'location' => '//cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js',
                ],
                [
                    'type' => 'css',
                    'asset' => false,
                    'location' => '//cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css',
                ],
            ],
        ],

Only carries like one textarea. Does not apply style and does not allow selecting more than one.

Answer 1

This happens directly to me, a q way works with me is to add the Cdn call to the html head and add this js to the q page will have the select.

$("select.select-menu-color").select2({
    allowClear: true
});

and this is my html, it has attribute in . net, but just to suit

<select asp-for="estoque.LinhaId" class="select-menu-color bg-grey" asp-items="@(new SelectList(Model.Linhas,"Id","Nome","Descricao"))"></select>

Answer 2

Basically just put the references .css and js, and with the example below:

$(document).ready(function() {
  $('.select2-single').select2({
    placeholder: 'Selecione os itens',
    width: '100%'
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"/>    
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/i18n/pt-BR.js"></script>


<select class="form-control select2-single" multiple>
  <option>Item 1</option>
  <option>Item 2</option>
  <option>Item 3</option>
  <option>Item 4</option>
</select>

I’m thinking it’s missing put select2.min.css and select2.min.js.