Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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>/profile/213374-douglas-juli%C3%A3o/?do=hovercard" data-mentionid="213374" href="/profile/213374-douglas-juli%C3%A3o/" rel="">@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.
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-selectBah 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.
cola o código ompleto da sau página (caso seja uma), era pra ter funcionado, manteve o $(id).selectpicker() dentro do document?
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>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.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!@William Bruno, Valeu pela dica. Utilizei o onchange no lugar de onclick e funcionou normalmente.
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.
não tem porque ter break ali.
o correto é onchange, agora corrija o teu script.
É um campo de multselect, se eu seleciono o tipo 2 e o tipo 3, o conteudo não irá aparecer na tela.
acho que quando você usa essa config style deve ter alguma alteração no atributo da class então usa id