[英]select2 MULTIPLE placeholder does not work
I'm using the following piece of code to select item but placeholder already is not visible.我正在对 select 项目使用以下代码,但占位符已经不可见。 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",
});
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 aware that the :placeholder-shown
pseudo-class will not work in the oldest versions of some browsers, as well as on IE, as you can check here .请注意,
:placeholder-shown
伪类在某些浏览器的最旧版本以及 IE 上不起作用,您可以在此处查看。
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.经过数小时试图弄清楚这一点后,我注意到当最初呈现选择时,.select2-search__field 的宽度为 0px。 When I selected an option and then removed the option, the placeholder is shown and the width was about 1000px.
当我选择一个选项然后删除该选项时,会显示占位符并且宽度约为 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%');
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>
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>
For me, placeholder seems to require allowClear: true
and object mode.对我来说,占位符似乎需要
allowClear: true
和对象模式。 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).
有关使用 yadcf 的通用示例,请参阅https://codepen.io/louking/pen/BGMvRP?# (对不起,额外的复杂性,但我相信 yadcf 将 select_type_options 直接传递给 select2)。
$("#select2").select2({
multiple:true,
allowClear:true,
placeholder: {
id: -1
text: "haha"
}
});
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>
This is a closed issue on the select2 GitHub but it was never really resolved in the library itself.这是select2 GitHub 上的一个已关闭问题,但它从未在库本身中真正得到解决。
My solution is similar to the solution presented by Pedro Figueiredo , except it does not make the container disappear.我的解决方案类似于Pedro Figueiredo提出的解决方案,只是它不会使容器消失。 There is a note about
display: contents
which could cause some accessibility issues.有一个关于
display: contents
的注释,这可能会导致一些可访问性问题。 You can simply switch that to a 100% width as well:您也可以简单地将其切换为 100% 宽度:
.select2-search--inline,
.select2-search__field:placeholder-shown {
width: 100% !important;
}
I prefer and find it slightly cleaner to set the styles based on the .select2-container
so I can then call standard HTML elements, like so:我更喜欢并发现基于
.select2-container
设置样式更简洁,因此我可以调用标准 HTML 元素,如下所示:
.select2-container li:only-child,
.select2-container input:placeholder-shown {
width: 100% !important;
}
Either set of code accesses the same elements either way, and I'm not sure which one is more 'future proof';任何一组代码都以任何一种方式访问相同的元素,我不确定哪一个更“面向未来”; for now it is a matter of preference.
现在这是一个偏好问题。
Also if you're using tabs you might need to throw in a此外,如果您使用的是标签,您可能需要添加一个
.select2-container {
width: 100% !important;
}
or else select2 fields might not be the proper width when switching to tabs that aren't displayed by default.否则,当切换到默认情况下不显示的选项卡时,select2 字段的宽度可能不合适。
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
});
I found another way, when I attach to select2 to dom than $('.select2-search__field').width('100%') change to width style with it $('.select2-search__field').width('100%')我找到了另一种方法,当我将 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%')
} }
In your CSS:在您的 CSS 中:
.select2-search-field, .select2-search-field input[placeholder] {
width: 100% !important;
}
Select2 4.0.1 still doesn't work for me for multiple selects. Select2 4.0.1 仍然不适用于我的多项选择。
My solution我的解决方案
HTML HTML
<select class="select-2" multiple>
...
</select>
JS 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%');
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-Bootstrap example is totaly different structure在您的select2-Bootstrap示例中,结构完全不同
I have some select2 inputs inside bootstrap tabs.我在引导选项卡中有一些 select2 输入。 The solution that works for me:
适合我的解决方案:
.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*/
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.