0

Estou com um pequeno impasse. Apenas um Select2 no meu sistema não esta funcionando o campo de busca. Ele faz a implementação do plugin, todavia no campo de busca ele não permite inserir os dados. Ele fica separado em um modal.Segue abaixo o trecho de código:

<div class="form-row">
    <div class="form-group col-md-12">
        <label>Advogado:</label><br/>
        <select class="form-control selectDois" name="advogado"style="width: 300px; !important">
            <option value="" selected="selected"></option>
            @foreach($advogados as $advogado)
            <option value="{{$advogado->id}}">{{$advogado->user->nome}}</option>
            @endforeach
        </select>
    </div>
</div>

implemtacao do selectDois

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<script>
    //select 2
    $(document).ready(function() {
        $('.selectDois').select2();
    });
 </script>

A ideia é essa...Quando eu clico no no botão, abre uma modal para vincular um advogado, todavia o select dois implementa, mas nao deixa inserir nada no campo de busca....

2
  • e esse modal já é carregado junto com a página e aparece depois, ou ele é carregado apenas quando acontece um evento (click, etc)? Commented 14/07/2019 às 13:23
  • o modal e carregado junto através do @include('admin.modais.alterarAdvogado') e quando ocorre o evento de click ele é ativado. Eu tentei colocar o script no arquivo do modal, mas mesmo assim nao funcinou. Commented 14/07/2019 às 13:57

1 Resposta 1

0

Basta setar a propriedade dropdownParent com o id do seu dropdown. Coloquei um exemplo usando bootstrap 4 pra vc ter uma ideia de como fica.

$('.selectDois').select2({
  width: '100%',
  dropdownParent: $('#exampleModal')
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.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/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <select class="form-control selectDois">
          <option>Valor 1</option>
          <option>Valor 2</option>
          <option>Valor 3</option>
          <option>Valor 4</option>
          <option>Valor 5</option>
          <option>Valor 6</option>
          <option>Valor 7</option>
          <option>Valor 8</option>
        </select>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

1
  • Simples e pratico, esta a funcionar perfeitamente, obrigado Commented 15/07/2019 às 12:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .