CODEWITHSUNDEEP
javascriptcsstwitter-bootstrapjquery-select2
Mariana Hernandez
Mariana Hernandez

Reputation: 1969

select2 placeholder showing empty option

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!

Upvotes: 13

Views: 47034

Answers (9)

Nejmeddine Jammeli
Nejmeddine Jammeli

Reputation: 1037

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

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

Upvotes: 0

Yauheni Leaniuk
Yauheni Leaniuk

Reputation: 456

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.

Upvotes: 0

bitifet
bitifet

Reputation: 3669

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 (&nbsp;) character (simple space didn't work too):

<option>&nbsp;</option>

Upvotes: 0

Jervie Vitriolo
Jervie Vitriolo

Reputation: 398

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

Upvotes: 7

Todor Todorov
Todor Todorov

Reputation: 2541

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

Upvotes: 0

devwebapp
devwebapp

Reputation: 135

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

Upvotes: 8

igor.vaynberg
igor.vaynberg

Reputation: 1453

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.

Upvotes: 2

Max
Max

Reputation: 1844

You have a syntax error on 2nd line.

<option></option>

Upvotes: 20

honor
honor

Reputation: 8138

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

Upvotes: 0

Related Questions