select2 MULTIPLE占位符不起作用

Question

我正在使用以下代码来选择项目,但占位符已经不可见.我正在使用这个例子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",
});

Answer 1

2020解决方案

这里的大问题是您选择的第一个选项+您的占位符，太大而无法放入下拉列表。因此， select2 将强制占位符为width:0; .

这可以通过以下两行 CSS 来解决，这将覆盖这个 select2 “功能”：

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

请注意，:placeholder-shown伪类在某些浏览器的最旧版本以及 IE 中不起作用，您可以在此处查看。

Answer 2

在脚本文件中添加此内容:

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

在HTML中添加这个:

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

Answer 3

只需使用数据占位符而不是占位符。

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

Answer 4

经过数小时的尝试，我发现当最初呈现选择内容时，.select2-search__field的宽度为0px。当我选择一个选项然后删除该选项时，将显示占位符，宽度约为1000px。

为了解决这个问题，我做了以下工作：

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

Answer 5

占位符标记不是选择列表的有效属性

你可以使用这样的东西：

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

然后编写适当的jquery

在您的select2-Bootstrap示例中，结构完全不同