select2 MULTIPLE占位符不起作用

Posted 2021-03-27

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

答案

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

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

另一答案

经过几个小时的尝试来解决这个问题，我注意到当最初渲染选择时，.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%');

另一答案

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

你可以使用这样的东西：

       <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

在你的qazxsw poi例子中是完全不同的结构

另一答案

在你的HTML中

select2-Bootstrap

在你的jquery

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

另一答案

对我来说，占位符似乎需要$(".select2").select2({ placeholder: "Selecione", allowClear: true }); 和对象模式。尝试以下操作以查看它是否有效。有关使用yadcf的一般示例，请参阅allowClear: true（对于额外的复杂性，我很抱歉，但我相信yadcf会直接将select_type_options传递给select2）。

https://codepen.io/louking/pen/BGMvRP?#