select2 MULTIPLE placeholder does not work

问题

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",
});

回答1:

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

回答2:

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>

回答3:

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.

回答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>

回答5:

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.

回答6:

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

回答7:

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"
   }
});

回答8:

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>

回答9:

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

回答10:

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*/
}

来源：https://stackoverflow.com/questions/28140705/select2-multiple-placeholder-does-not-work