Receber valor de campo multiple com datepicker

[Luiz Gustavo Costa Ceolin 8]

Boa tarde. Tenho um campo de mult seleção na minha pagina e tenho que mostrar um novo campo na tela quando seleciono um certo item da seleção.

Até aí tudo bem, porém quando implemento na tela um visual agradavel para o campo multiple, utilizando uma classe do datepicker, eu não consigo mais receber nenhum valor selecionado do campo. Vou postar os fonts de teste que estou utilizando.

View

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>

<form name="formulario">
  <select id="select" name="select[]" class="selectpicker" multiple="multiple" onclick="getSelectValues(select)"> <!-- ao tirar a class selectpicker, funciona normalmente. -->
    <option value="1"> tipo 1 </option>
    <option value="2"> tipo 2 </option>
    <option value="3"> tipo 3 </option>
  </select>
</form>

<input type="text" id="agencia_bb" style="display: none;" value="" > <!-- campo que irá aparecer -->

 

Javascript

<!-- linkando o estilo no select -->
<script type="text/javascript">
  $('.selectpicker').selectpicker({
    style: 'btn-info',
    size: 4
  });
</script>

 

[Douglas Julião 34]

acho que quando você usa essa config style deve ter alguma alteração no atributo da class então usa id

<script type="text/javascript">
  $('#select').selectpicker({
    style: 'btn-info',
    size: 4
  });
</script>

[Luiz Gustavo Costa Ceolin 8]

@Douglas Julião, tentei víncular pelo ID e ocorre o mesmo problema. Percebi agora que não é a função que não recebe valor, mas sim a função que não é iniciado quando é dado o click.

[Douglas Julião 34]

Nossa é mesmo, vacilamos rsrsrs é só colocar dentro do document jquery

$(document).ready(function(){
	//seu código
});

Mas no caso tem que chamar o jquery antes do seu bootstrap-select

[Luiz Gustavo Costa Ceolin 8]

Bah cara, não sei se eu que estou executando errado, por acaso você testou aí? Pois fiz como você passou e não obtive sucesso.

[Douglas Julião 34]

cola o código ompleto da sau página (caso seja uma), era pra ter funcionado, manteve o $(id).selectpicker() dentro do document?

 

[Luiz Gustavo Costa Ceolin 8]

Eu trabalho com estrutura em MCV, vou postar tudo novamente.

@extends('layout.principal')
@section('conteudo')

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>

<form name="formulario">
  <select id="select" name="select[]" class="" multiple="multiple" onclick="getSelectValues(select)"> <!-- ao tirar a class selectpicker, funciona normalmente. -->
    <option value="1"> tipo 1 </option>
    <option value="2"> tipo 2 </option>
    <option value="3"> tipo 3 </option>
  </select>
</form>

<input type="text" id="agencia_bb" style="display: none;" value="" > <!-- campo que irá aparecer -->

<!-- função que pega os valores e mostra o campo na tela -->
<script type="text/javascript">
$(document).ready(function (){
function getSelectValues(select) {
  var result = [];
  var options = select && select.options;
  var opt;

  for (var i=0, iLen=options.length; i<iLen; i++) {
    opt = options[i];

    if (opt.selected) {
      result.push(opt.value || opt.text);
      if(opt.value == '2')
      {
        document.getElementById('agencia_bb').style.display = 'block';
        break;
      }
      else{
        document.getElementById('agencia_bb').style.display = 'none';
      }
    }
  }
  return result;
}
});
</script>

<!-- linkando o estilo no select -->
<script type="text/javascript">
  $('#select').selectpicker({
    style: 'btn-info',
    size: 4
  });
</script>
@stop

 

[William Bruno 1501]

Não faz sentido o evento onclick em tags select.

 

Para selects use onchange, e no teu caso, como está usando um plugin, o correto é que você use um método da documentação dele, e não mais os eventos padrões do html.

[Douglas Julião 34]

Putz realmente,  eu foquei na parte do js que acabei nem me tocando no click la no select ...

Segue o conselho do William Bruno que é sucesso rsrs...

Boa sorte!

[Luiz Gustavo Costa Ceolin 8]

@William Bruno, Valeu pela dica. Utilizei o onchange no lugar de onclick e funcionou normalmente.

 

[Luiz Gustavo Costa Ceolin 8]

O ruim de utilizar o onChange, é que quando seleciono o item 2, o meu campo aparece, porém quando eu desceliciono o item 2, em tese o campo deveria desaparecer, porém ele continua na tela devido ao meu break.

[William Bruno 1501]

não tem porque ter break ali.

o correto é onchange, agora corrija o teu script.

[Luiz Gustavo Costa Ceolin 8]

É um campo de multselect, se eu seleciono o tipo 2 e o tipo 3, o conteudo não irá aparecer na tela.