select2 MULTIPLE 占位符不起作用答案

【问题标题】：select2 MULTIPLE placeholder does not workselect2 MULTIPLE 占位符不起作用
【发布时间】：2015-03-24 07:26:43
【问题描述】：

我正在使用以下代码选择项目，但占位符已经不可见。我正在使用这个例子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 以获得更好的选择：D

标签： javascript css twitter-bootstrap jquery-select2 placeholder

【解决方案1】：

经过数小时试图弄清楚这一点后，我注意到当最初呈现选择时，.select2-search__field 的宽度为 0px。当我选择一个选项然后删除该选项时，会显示占位符并且宽度约为 1000 像素。

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

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

【讨论】：

我还发现重置$("#select2").val(null).trigger('change');的值后，你必须运行最后一行来修复占位符。
我不得不做一个稍微不同的版本：$('.select2-selection__rendered > li, .select2-search__field').css('width', '100%');
仅供参考，我不得不推迟它，例如setTimeout(function() { $('.select2-search__field').css('width', '100%'); }, 0); - 多么棒的 PITA。

【解决方案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。

【讨论】：

【解决方案3】：

将此添加到您的脚本文件中：

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

【讨论】：

data-placeholder 在元素 HTML 中是所有必要的。
@Madbreaks 有关选择 2 的此功能的文档 select2.org/configuration/data-attributes

【解决方案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>

【讨论】：

【解决方案5】：

对我来说，占位符似乎需要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"
   }
});

【讨论】：

【解决方案6】：

在您的脚本文件中：

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

在您的 html 中（添加 data-placeholder="Your text"）：

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

【讨论】：

【解决方案7】：

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

我的解决方案类似于Pedro Figueiredo提出的solution，只是它不会使容器消失。有一个关于display: contents 的note 可能会导致一些可访问性问题。您也可以简单地将其切换为 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 字段的宽度可能不合适。

【讨论】：

【解决方案8】：

在你的 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
});

【讨论】：

【解决方案9】：

当我将 select2 附加到 dom 时，我找到了另一种方法 $('.select2-search__field').width('100%') 用它改成宽度样式 $('.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%')

}

【讨论】：

【解决方案10】：

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

你可以使用这样的东西：

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

【讨论】：

你能帮我重写 jquery 吗？

【解决方案11】：

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

【讨论】：