选择2 多个占位符不起作用
select2 MULTIPLE placeholder does not work
我正在使用以下代码段来选择项目,但占位符已经不可见。我正在使用此示例 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 解决方案
这里最大的问题是您选择的第一个选项+占位符,太大而无法放入下拉列表中。因此,select2 将强制占位符为宽度: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 上不起作用,您可以在此处查看。
经过数小时的尝试,我注意到当选择最初呈现时,.select2-search__field的宽度为 0px。当我选择一个选项然后删除该选项时,将显示占位符,宽度约为 1000px。
因此,为了解决此问题,我做了以下操作:
$('.search-select-multiple').select2({
dropdownAutoWidth: true,
multiple: true,
width: '100%',
height: '30px',
placeholder: "Select",
allowClear: true
});
$('.select2-search__field').css('width', '100%');
在脚本文件中添加以下内容:
$('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>
只需使用数据占位符而不是占位符。
<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>
,占位符似乎需要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"
}
});
在脚本文件中:
$("select").each(function(i,v){
var that = $(this);
var placeholder = $(that).attr("data-placeholder");
$(that).select2({
placeholder:placeholder
});
});
在你的 html 中(添加数据占位符="你的文本"):
<select data-placeholder="Yours Placeholder" multiple>
<option>Value A</option>
<option>Value B</option>
</select>
这是 select2 GitHub 上的一个封闭问题,但从未在库本身中真正解决过。
我的解决方案类似于佩德罗·菲格雷多提出的解决方案,只是它不会使容器消失。有一个关于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 字段的宽度可能不正确。
在你的 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
});
我找到了另一种方法,当我附加到 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%')
}
select2/3.5.4
在您的 CSS 中:
.select2-search-field, .select2-search-field input[placeholder] {
width: 100% !important;
}
> 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%');
试试这段代码
打开此图像以获取代码
在你的JavaScript中
$('.select2-search__field').addClass('w-100')
或
$('.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
在您的 select2-Bootstrap 示例中是完全不同的结构
我在引导选项卡中有一些 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*/
}
- 初始化ng模型时,Angular ui选择占位符不起作用
- 占位符属性嵌入IE中的iframe时不起作用
- IE8的Javascript占位符不起作用
- 单选插件的占位符文本不起作用
- 引导图示符在java Web应用程序中不起作用
- 角度需要选择选项对占位符不起作用
- 选择2 多个占位符不起作用
- 带有 CRLF 的占位符在 Firefox 中不起作用
- asp.net:资源 .resx 文件中的换行符 不起作用
- 带有 ANGULAR date.now() 的占位符日期在 Chrome 中不起作用
- 角度 ui 选择占位符不起作用
- 占位符在文本区域中不起作用
- 多选插件中的占位符文本不起作用
- jQuery ui可排序占位符在firefox中不起作用:
- Javascript-删除最后一个全局修饰符不起作用
- Internet Explorer 换行符不起作用
- .jshintignore中的相对路径通配符不起作用
- 占位符属性在ie浏览器中不起作用
- JavaScript上的换行符不起作用
- 换行符不起作用