select2 placeholder showing empty option

Question

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!

Disservice

style="display:none;" ? – Leaseholder

that still shows the empty option @3rror404 – Disservice

Maybe this is an option? jsfiddle.net/nJ8Vu – Leaseholder

i dont know if it it because of the select being inside a modal, but the disabled option is not working =( @3rror404 – Disservice

Answer 1

You have a syntax error on 2nd line.

<option></option>

Gaselier

in the select2 documentation, it says: When placeholder is used for a non-multi-value select box, it requires that you include an empty <option></option> tag as your first option. @Gaselier – Disservice

the empty option is fine, but select2 needs to be told the placeholder text - it will then hide the empty option... – Pernickety

Answer 2

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');

Garver

Answer 3

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

Cystocele

Here's a similar solution which uses pure HTML to prevent it from being clicked, as well as several other approaches: https://mcmap.net/q/63562/-set-the-select-option-as-blank-as-default-in-html-select-element – Muscle

Answer 4

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.

Pernickety

Answer 5

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();

Waldron

thank you, i tried that but it removes the placeholder =( @sr. – Disservice

Answer 6

Just try $('select').select2({placeholder: 'Please select...'});. Combined with an empty <option></option> should do the job ;).

Melnick

Answer 7

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>&nbsp;</option>

Deconsecrate

Answer 8

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.

Chacon

Answer 9

all you need to put as per the official documentation and it will work :

$('#mySelect2').val(null).trigger('change');

Lackey