select2 MULTIPLE 占位符不起作用

Question

我正在對 select 項目使用以下代碼，但占位符已經不可見。 我正在使用這個例子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

經過數小時試圖弄清楚這一點后，我注意到當最初呈現選擇時，.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%');

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

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

對我來說，占位符似乎需要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 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>

Answer 7

這是select2 GitHub 上的一個已關閉問題，但它從未在庫本身中真正得到解決。

我的解決方案類似於Pedro Figueiredo提出的解決方案，只是它不會使容器消失。 有一個關於display: contents的注釋，這可能會導致一些可訪問性問題。 您也可以簡單地將其切換為 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 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
});

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

}

Answer 10

選擇2/3.5.4

在您的 CSS 中：

.select2-search-field, .select2-search-field input[placeholder] {
  width: 100% !important;
}

Answer 11

Select2 4.0.1 仍然不適用於我的多項選擇。

我的解決方案

HTML

<select class="select-2" multiple>
   ...
</select>

JS

$('.select-2').select2({
    minimumResultsForSearch: -1,
    placeholder: function(){
        $(this).data('placeholder');
    }
});
$('.select-2[multiple]').each(function() {
   $(this).next('.select2').find('textarea').attr('placeholder', $(this).data('placeholder'));
});

$('.select2-search__field').css('width', '100%');

Answer 12

占位符標記不是選擇列表的有效屬性

你可以使用這樣的東西：

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

我在引導選項卡中有一些 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*/
}