Select2 占位符问题

Question

我有一个 Select2 多选 html 元素。渲染时不显示占位符，但如果我选择并删除该项目，则会显示占位符。我不知道如何让它发挥作用。请指教。

最初

选择时

移除物品后

代码：

@Html.DropDownListFor(m => m.Vendor, new SelectList(Model.Status), "Search Status", new { @id = "advanced-search-lsc-status", @class = "form-control", @multiple = "multiple", data_placeholder = "Select Status" })


$('#advanced-search-status').select2({
            minimumResultsForSearch: -1,
            placeholder: function(){
                $(this).data('placeholder');
            },
            width: '100%'
        });

Answer 1

刚刚发现出了什么问题，最初宽度设置为0，隐藏了占位符。

只是使用这个 jquery 代码进行操作。

.select2-container--default .select2-search--inline .select2-search__field{
    width:initial!important;
}

现在可以了

多谢你们。

Answer 2

尝试这个

.select2-container .select2-search--inline:first-child {
    float: none;
}
.select2-container .select2-search--inline:first-child .select2-search__field{
    width: 100% !important;
}