too add a placeholder in select2 i have to add an empty option tag in the code like this
<select id="e2" name="rol_id" > <option><option> {foreach from=$data.roles item=rol} <option value={$rol.rol_id}>{$rol.rol_nombre}</option> {/foreach} </select> but when i do that i get this option empty that is selectable 
how can i not show that option but still the placeholder?
Thanks!
You have a syntax error on 2nd line.
<option></option> 
It's a late answer, but it can help someone.
I have modal with a select2 input.
We need to add <option></option> for the placeholder to be shown.
HTML
<select id="Name"> <option></option> <option value="John">John</option> <option value="Brian">Brian</option> <option value="Carl">Carl</option> </select> If I want the placeholder to appear.
Jquery
$('#Name').select2({placeholder: 'Select a Name'}); $('#Name').select2('val', ''); If I want to see a value on the select2 input:
$('#Name').select2('val', 'John'); The empty option is actually for placeholder, I solved it using the code below
var s1 = $('#select2id').select2({ multiple: true, placeholder: "Select values" }); s1.val([' ']).trigger("change"); the s1.val([' ']).trigger("change"); did the trick
leave the empty option and specify the placeholder text either via the data-placeholder attribute on the tag or via a placeholder option when initializing select2.
You could add a line to remove the first "empty" option after loading the options for roles. You could do it as below using jquery.
$("#selectBox option[value='']").remove(); Just try $('select').select2({placeholder: 'Please select...'});. Combined with an empty <option></option> should do the job ;).
I've just faced the same problem and simple <option></option> didn't work to me.
It seems empty option is inserted but it doesn't allocate any height so it's impossible to reach it.
I solved by just adding a non-breaking-space ( ) character (simple space didn't work too):
<option> </option> A little bit offtop but you may search solution for this:
If you have empty options between every select2 widget option - check your jinja tags and remove <option></option> tags if you are using jinja {% for %} loop in template.
all you need to put as per the official documentation and it will work :
$('#mySelect2').val(null).trigger('change'); 
style="display:none;"?