select2 MULTIPLE placeholder does not work

Question

I'm using the following piece of code to select item but placeholder already is not visible. I am using this example select2-bootstrap

   <div class="form-group" style="width:70px; height:44px;">
  <select class="form-control select2" multiple="multiple" id="select2" placeholder="cawky parky">
    <option>ahoj</option>
    <option>more</option>
    <option>ideme</option>
    <option>na </option>
    <option>pivo?</option>
  </select>
</div>
  <script src="//select2.github.io/select2/select2-3.4.2/select2.js"></script>

$(document).ready(function () {
$("#select2").select2({
    multiple:true,
    placeholder: "haha",
});

Kotz

plus 1 for great options :D – Freeway

Answer 1

2020 solution

The big issue here, is the first option of your select + your placeholder, being too big to fit in the dropdown. And so, select2 will force the placeholder to be width:0;.

This can be fixed with the following two lines of CSS, which will override this select2 "feature":

.select2-search--inline {
    display: contents; /*this will make the container disappear, making the child the one who sets the width of the element*/
}

.select2-search__field:placeholder-shown {
    width: 100% !important; /*makes the placeholder to be 100% of the width while there are no options selected*/
}

Be aware that the :placeholder-shown pseudo-class will not work in the oldest versions of some browsers, as well as on IE, as you can check here.

Devoirs

Answer 2

After hours of trying to figure this out I noticed that when the select is initially rendered the width of .select2-search__field is 0px. When I selected an option and then removed the option, the placeholder is shown and the width was about 1000px.

So to fix this I did the following:

$('.search-select-multiple').select2({
    dropdownAutoWidth: true,
    multiple: true,
    width: '100%',
    height: '30px',
    placeholder: "Select",
    allowClear: true
});
$('.select2-search__field').css('width', '100%');

Creaky

I also found that after resetting the value $("#select2").val(null).trigger('change');, you have to run this last line to fix the placeholder. – Shivers

I had to do a slightly different version of this: $('.select2-selection__rendered > li, .select2-search__field').css('width', '100%'); – Flintshire

FYI, I had to delay it, e.g. setTimeout(function() { $('.select2-search__field').css('width', '100%'); }, 0); - what a PITA. – Ideality

Answer 3

Add This In Your Script File:

$('select').select2({
    minimumResultsForSearch: -1,
    placeholder: function(){
        $(this).data('placeholder');
    }
}):

In HTML add This:

<select data-placeholder="Yours Placeholder" multiple>
    <option>Value 1</option>
    <option>Value 2</option>
    <option>Value 3</option>
    <option>Value 4</option>
    <option>Value 5</option>
</select>

Singular

data-placeholder in the element HTML is all that is necessary. – Rama

@Rama For documentation of this fuctionality of select 2's select2.org/configuration/data-attributes – Alumina

Answer 4

Just use data-placeholder instead of placeholder.

<div class="form-group" style="width:70px; height:44px;">
    <select class="form-control select2" multiple="multiple" id="select2" data-placeholder="cawky parky">
        <option>ahoj</option>
        <option>more</option>
        <option>ideme</option>
        <option>na </option>
        <option>pivo?</option>
    </select>
</div>

Socorrosocotra

Answer 5

In your script file:

$("select").each(function(i,v){
    var that = $(this);
    var placeholder = $(that).attr("data-placeholder");
    $(that).select2({
        placeholder:placeholder
    });
});

in your html (add data-placeholder="Your text"):

<select data-placeholder="Yours Placeholder" multiple>
    <option>Value A</option>
    <option>Value B</option>
</select>

Holiday

Answer 6

For me, placeholder seems to require allowClear: true and object mode. Try the following to see if it works. See https://codepen.io/louking/pen/BGMvRP?# for generic examples using yadcf (sorry for the extra complexity, but I believe yadcf passes select_type_options directly to select2).

$("#select2").select2({
    multiple:true,
    allowClear:true,
    placeholder: {
      id: -1
      text: "haha"
   }
});

Tumbling

Answer 7

This is a closed issue on the select2 GitHub but it was never really resolved in the library itself.

My solution is similar to the solution presented by Pedro Figueiredo, except it does not make the container disappear. There is a note about display: contents which could cause some accessibility issues. You can simply switch that to a 100% width as well:

.select2-search--inline,
.select2-search__field:placeholder-shown {
    width: 100% !important;
}

I prefer and find it slightly cleaner to set the styles based on the .select2-container so I can then call standard HTML elements, like so:

.select2-container li:only-child,
.select2-container input:placeholder-shown {
  width: 100% !important;
}

Either set of code accesses the same elements either way, and I'm not sure which one is more 'future proof'; for now it is a matter of preference.

Also if you're using tabs you might need to throw in a

.select2-container {
  width: 100% !important;
}

or else select2 fields might not be the proper width when switching to tabs that aren't displayed by default.

Reganregard

Answer 8

In your html

      <select class="form-control select2" multiple="multiple" id="select2">
             <option selected="selected">cawky parky</option>
             <option>ahoj</option>
             <option>more</option>
             <option>ideme</option>
             <option>na </option>
             <option>pivo?</option>   
    </select> 

in your jquery

$(".select2").select2({
    placeholder: "Selecione",
    allowClear: true
});

Rede

Answer 9

I found another way, when I attach to select2 to dom than $('.select2-search__field').width('100%') change to width style with it $('.select2-search__field').width('100%')

function setSelect(select, data, placeholder) {
select.each(function () {
    let $this = $(this)
    $this.wrap('<div class="position-relative"></div>')
    $this.select2({
        placeholder,
        allowClear: true,
        dropdownParent: $this.parent(),
        dropdownAutoWidth: true,
        data
    })
})
$('.select2-search__field').width('100%')

}

Serif

Answer 10

select2/3.5.4

In your CSS:

.select2-search-field, .select2-search-field input[placeholder] {
  width: 100% !important;
}

Ghibelline

Answer 11

Select2 4.0.1 still doesn't work for me for multiple selects.

My solution

HTML

<select class="select-2" multiple>
   ...
</select>

JS

$('.select-2').select2({
    minimumResultsForSearch: -1,
    placeholder: function(){
        $(this).data('placeholder');
    }
});
$('.select-2[multiple]').each(function() {
   $(this).next('.select2').find('textarea').attr('placeholder', $(this).data('placeholder'));
});

$('.select2-search__field').css('width', '100%');

Meill

Answer 12

try this code

Open this image for the code

in your javascript

$('.select2-search__field').addClass('w-100')

or

$('.select2-search__field').css('width', '100%')

Palimpsest

Answer 13

placeholder tag is not valid attribute for select list

you can use something like this:

       <select class="form-control select2" multiple="multiple" id="select2">
                 <option selected="selected">cawky parky</option>
                 <option>ahoj</option>
                 <option>more</option>
                 <option>ideme</option>
                 <option>na </option>
                 <option>pivo?</option>   
        </select> 

Then write proper jquery

In your select2-Bootstrap example is totaly different structure

Pliam

can you rewrite jquery for me please ? – Kotz

Answer 14

I have some select2 inputs inside bootstrap tabs. The solution that works for me:

.select2-search--inline {
    display: contents; /*this will make the container disappear, making the child the one who sets the width of the element*/
}

.select2-search__field:placeholder-shown {
    width: 100% !important; /*makes the placeholder to be 100% of the width while there are no options selected*/
}

Dextrality