twitter-bootstrap select2 MULTIPLE 占位符不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28140705/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
select2 MULTIPLE placeholder does not work
提问by Majo Mrva
I'm using the following piece of code to select item but placeholder already is not visible. I am using this example select2-bootstrap
我正在使用以下代码选择项目，但占位符已经不可见。我正在使用这个例子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",
});
回答by Oleg Sewruk
Add This In Your Script File:
在您的脚本文件中添加：
$('select').select2({
minimumResultsForSearch: -1,
placeholder: function(){
$(this).data('placeholder');
}
}):
In HTML add This:
在 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>
回答by RoyDene
After hours of trying to figure this out I noticed that when the select is initially rendered the width of .select2-search__field is 0px. When I selected an option and then removed the option, the placeholder is shown and the width was about 1000px.
经过数小时的尝试，我注意到当最初呈现选择时，.select2-search__field 的宽度为 0px。当我选择一个选项然后删除该选项时，会显示占位符，宽度约为 1000 像素。
So to fix this I did the following:
所以为了解决这个问题，我做了以下事情：
$('.search-select-multiple').select2({
dropdownAutoWidth: true,
multiple: true,
width: '100%',
height: '30px',
placeholder: "Select",
allowClear: true
});
$('.select2-search__field').css('width', '100%');
回答by Tamal Biswas
Just use data-placeholder instead of placeholder.
只需使用数据占位符而不是占位符。
<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>
回答by Pedro Figueiredo
2020 solution
2020解决方案
The big issue here, is the first option of your select + your placeholder, being too big to fit in the dropdown. And so, select2 will force the placeholder to be width:0;.
这里的大问题是您选择的第一个选项+您的占位符，太大而无法放入下拉列表。因此， select2 将强制占位符为width:0; .
This can be fixed with the following two lines of CSS, which will override this select2 "feature":
这可以通过以下两行 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*/
}
Be awarethat the :placeholder-shownpseudo-class will not work in the oldest versions of some browsers, as well as on IE, as you can check here.
请注意，:placeholder-shown伪类在某些浏览器的最旧版本以及 IE 中不起作用，您可以在此处查看。
回答by Faisal Shahzad
In your script file:
在您的脚本文件中：
$("select").each(function(i,v){
var that = $(this);
var placeholder = $(that).attr("data-placeholder");
$(that).select2({
placeholder:placeholder
});
});
in your html (add data-placeholder="Your text"):
在你的 html 中（添加 data-placeholder="Your text"）：
<select data-placeholder="Yours Placeholder" multiple>
<option>Value A</option>
<option>Value B</option>
</select>
回答by Lou K
For me, placeholder seems to require allowClear: trueand object mode. Try the following to see if it works. See https://codepen.io/louking/pen/BGMvRP?#for generic examples using yadcf (sorry for the extra complexity, but I believe yadcf passes select_type_options directly to select2).
对我来说，占位符似乎需要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"
}
});
回答by AndreiDeholte
In your html
在你的 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>
in your jquery
在你的jQuery中
$(".select2").select2({
placeholder: "Selecione",
allowClear: true
});
回答by wedo
placeholder tag is not valid attribute for select list
占位符标记不是选择列表的有效属性
you can use something like this:
你可以使用这样的东西：
<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>
Then write proper jquery
然后编写适当的jquery
In your select2-Bootstrapexample is totaly different structure
在您的select2-Bootstrap示例中，结构完全不同
