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%'
        });

- Ranjith Varatharajan

---

不相关，但使用 ListBoxFor() 并删除 new { multiple = "multiple" } - 参考此答案。 - user3559349

@StephenMuecke，我试过了，问题仍然存在:( 顺便说一句，好信息。 - Ranjith Varatharajan

我说了“不相关”：）这只是为了修复您代码中的其他问题。 - user3559349

Answer 1

刚刚发现问题所在，最初的宽度设置为0，这导致了占位符被隐藏。

我使用以下jquery代码进行了操作。

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

现在它可以工作了。

感谢大家。

- Ranjith Varatharajan

Answer 2

试一试

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

- Tengiz G

---

使用“first-child”选择器可以确保在选择选项时搜索字段不会占用额外的空间 - 只有在多选为空时，它才保持其宽度。 - lflier

Answer 3

只需添加属性placeholder

$("#advanced-search-status").attr("placeholder", "Select Status");

or

$('#advanced-search-status').select2({
    placeholder: "Select Status"
});

- Parth Raval

---

谢谢@Parth的快速回复，但我已经尝试过这些了。仍然存在问题。 - Ranjith Varatharajan