Javascript select2多个占位符不起作用

我使用下面的代码来选择项目，但占位符已经不可见。我正在使用这个例子

阿霍
更多
艾德梅
na
皮沃？
$（文档）.ready（函数（）{
$（“#选择2”）。选择2({
多重：对，
占位符：“哈哈”，
});

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

您可以使用以下内容：

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

考基帕克
阿霍
更多
艾德梅
na
皮沃？

然后编写适当的jquery

---

在您的示例中是完全不同的结构

在脚本文件中添加以下内容：

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

值1
价值2
价值3
价值4
价值5

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

---

经过数小时的尝试，我注意到最初呈现select时，.select2-search____字段的宽度为0px。当我选择一个选项，然后删除该选项时，会显示占位符，宽度约为1000px

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

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

---

对我来说，占位符似乎需要

allowClear:true

和对象模式。请尝试以下方法，看看它是否有效。请参阅使用yadcf的一般示例（对于额外的复杂性，我很抱歉，但我相信yadcf会将select_type_选项直接传递给select2）

---

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

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

阿霍
更多
艾德梅
na
皮沃？

在脚本文件中：

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

在html中（添加数据占位符=“您的文本”）：

价值A
B值

2020解决方案

这里最大的问题是，选择+你的占位符的第一个选项太大，无法放在下拉列表中。因此，选择2将强制占位符为宽度：0；

这可以通过以下两行CSS修复，这将覆盖此select2“功能”：

---

请注意显示的

：占位符

伪类在某些浏览器的最旧版本以及IE上不起作用，您可以检查一下。

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

这是一个问题，但图书馆本身从未真正解决过

我的解决方案与提出的类似，只是它不会使容器消失。有一个about

display:contents

，可能会导致一些可访问性问题。您也可以简单地将其切换为100%宽度：

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

我更喜欢并且发现基于

设置样式更简洁。选择2 container

，这样我就可以调用标准HTML元素，如下所示：

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

无论哪一组代码以哪种方式访问相同的元素，我都不确定哪一个更能“证明未来”；现在这是一个偏好问题

此外，如果您使用的是选项卡，则可能需要添加

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

---

或者，当切换到默认情况下不显示的选项卡时，select2字段的宽度可能不正确。

您能为我重写jquery吗？加上1可以获得很好的选项：元素HTML中的数据占位符是所有必要的。@Madbreaks为记录select2的此功能，我还发现重置后设置值

$（“#select2”）.val（null）.trigger（'change'）；

，您必须运行最后一行来修复占位符。我必须执行稍微不同的版本：

$（'.select2-selection_u呈现>li，.select2-search_u字段'）。css（'width'，'100%'）；

仅供参考，我必须延迟它，例如

setTimeout（function（）{$（'.select2-search__field'）.css（'width'，'100%'）；}，0）；

-真是一个PITA。谢谢，这正是我需要的

.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-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-search--inline,
.select2-search__field:placeholder-shown {
    width: 100% !important;
}

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

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