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 enter image description here

how can i not show that option but still the placeholder?

Thanks!

i dont know if it it because of the select being inside a modal, but the disabled option is not working =( @3rror404 — Mariana Hernandez, Oct 18 '13 at 15:02

Max · Accepted Answer · 2013-10-18T15:11:55.830

20

You have a syntax error on 2nd line.

<option></option>

edited Oct 18 '13 at 15:11

answered Oct 18 '13 at 15:03

Max

1,824
13
22

1

in the select2 documentation, it says: When placeholder is used for a non-multi-value select box, it requires that you include an empty tag as your first option. @Max – Mariana Hernandez Oct 18 '13 at 15:06
3

the empty option is fine, but select2 needs to be told the placeholder text - it will then hide the empty option... – igor.vaynberg Oct 18 '13 at 16:14

score 8 · Answer 2 · edited Oct 05 '16 at 16:40

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

score 7 · Answer 3 · answered Sep 07 '17 at 03:56

7

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

answered Sep 07 '17 at 03:56

Jervie Vitriolo

398
5
17

Here's a similar solution which uses pure HTML to prevent it from being clicked, as well as several other approaches: https://stackoverflow.com/a/23638053/3196753 – tresf Sep 07 '17 at 04:08

score 2 · Answer 4 · answered Oct 18 '13 at 16:13

2

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.

answered Oct 18 '13 at 16:13

igor.vaynberg

1,453
12
8

score 0 · Answer 5 · answered Oct 18 '13 at 15:01

0

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

answered Oct 18 '13 at 15:01

honor

7,378
10
48
76

thank you, i tried that but it removes the placeholder =( @sr. – Mariana Hernandez Oct 18 '13 at 15:04

score 0 · Answer 6 · answered Aug 04 '17 at 20:18

0

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

answered Aug 04 '17 at 20:18

Todor Todorov

2,503
1
16
15

score 0 · Answer 7 · answered Sep 03 '19 at 11:47

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>

score 0 · Answer 8 · answered Jul 07 '21 at 14:17

0

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.

answered Jul 07 '21 at 14:17

Yauheni Leaniuk

418
1
6
15

score 0 · Answer 9 · answered Jul 03 '22 at 19:21

0

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

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

answered Jul 03 '22 at 19:21

Nejmeddine Jammeli

1,011
9
17

select2 placeholder showing empty option

9 Answers9