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

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

$('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 2

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中运行，因为您可以检查here。 / p>

Answer 3

经过数小时的尝试，我发现当最初呈现选择内容时，.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 4

只需使用数据占位符代替占位符即可。

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

这是closed issue on the select2 GitHub，但从未在库本身中真正解决过。

我的解决方案类似于solution提出的Pedro Figueiredo，只是它不会使容器消失。关于display: contents的{{3}}可能会导致一些可访问性问题。您也可以简单地将其切换为100％宽度：

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

我更喜欢并发现它更.select2-container来设置样式更加简洁，因此我可以调用标准HTML元素，如下所示：

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

任何一组代码都以相同的方式访问相同的元素，但我不确定哪个更“面向未来”。目前，这只是个偏好问题。

此外，如果您使用的是标签页，则可能需要插入

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

否则，当切换到默认情况下不显示的选项卡时，select2字段的宽度可能不合适。

Answer 6

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

你可以使用这样的东西：

       <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示例中，完全是不同的结构

Answer 7

在你的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>

你的jquery中的

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

Answer 8

对我来说，占位符似乎需要allowClear: true和对象模式。请尝试以下操作，看看是否可行。有关使用yadcf的一般示例，请参见https://codepen.io/louking/pen/BGMvRP?#（很抱歉，因为额外的复杂性，但我相信yadcf会将select_type_options直接传递给select2）。

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

Answer 9

在您的脚本文件中：

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

在您的html中（添加data-placeholder =“您的文本”）：

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

Answer 10

我在引导程序选项卡中有一些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*/
}

select2 MULTIPLE占位符不起作用

10 个答案: