I set up SELECT2 and am trying to use it inside a form, but it’s not dispaying correctly.
This is my HTML code:
<div class="myDivSelect input-group" id="myDivSelect">
<span class="input-group-addon"><i class="fa fa-handshake-o"></i></span>
<select id="select2_canal" name="select2_canal" class="select2_canal form-control">
</select>
</div>
And this is my script:
$(document).ready(function() {
$(".select2_canal").select2({
/dropdownParent: $(’.myDivSelect’),/
language: {
inputTooShort: function () {return “Debe ingresar al menos 3 caracteres”;},
minimumInputLength: function () {return “Debe ingresar al menos 3 caracteres”;},
noResults: function () {return “No se encontraron resultados”;}
},
minimumInputLength: 3,
placeholder: “Buscar canal…”,
allowClear: true,
width: “100%”,
debug: true,
ajax: {
type: “POST”,
url: “bpa-buscarcanal.php”,
delay: 500,
data: function (params) {
//console.log(params);
return {
canal: params.term
}
} ,
processResults: function (resp) {
return {
results: resp
}
}
}
});
}
);
The ajax part where it queries the other PHP file works ok. It also searches for data as requested, and shows the results.
But i get like 2 select boxes. I noticed that if I remove the external DIV, it works OK.
I tried with and without the dropdownParent parameter. And made lots of tests but can’t get it to work.
How do I make it work leaving the DIV as is?
Thanks a lot