Select2 多框占位符未在隐藏时显示，然后使其可见

Posted 2023-05-07

【中文标题】Select2 多框占位符未在隐藏时显示，然后使其可见

【英文标题】：Select2 multiple box placeholder not showing on hide then make it visible case

【发布时间】：2016-08-29 09:50:40

【问题描述】：

我在 <select multiple> 中使用 select2()。我所拥有的是该选择中的 占位符。我正在做的是最初我隐藏了包含 div 的选择，然后我让它可见。在这种情况下，最初没有显示占位符。

如果我们不做这个隐藏和阻止的事情，那么它工作正常。

FIDDLE

【问题讨论】：

我更新了答案以反映您的问题。我碰巧阅读了“多个”部分。我提供了代码来解决您的问题。你能验证解决方案吗？

【参考方案1】：

（已编辑）对不起，我读错了问题。我认为这是关于常规选择而不是倍数。

我检查了你的小提琴。

这包含 2 个倍数。 <select multiple id="e1" style="width:100%" multiple data-placeholder="Choose country(s)*">。我不知道这是不是故意的。但是你应该删除一个。 当您设置display: none 时，输入元素select2 的width 设置为0px。您需要将宽度增加到合适的大小。 我在您的代码中添加了$('.select2-input, .select2-default', $("#divid")).css('width', '100%');，这解决了您的问题。

片段（非功能性，需要 select2 库）：

$("#e1").select2();
    $('.select2-input, .select2-default', $("#divid")).css('width', '100%');
    $("#divid").css("display","block");

<div id="divid" style="display:none;">

<select id="e1" style="width:100%" multiple data-placeholder="Choose country(s)*">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>
        <option value="WY">Wyoming</option>
    </select>     
</div>

【讨论】：

哥们，你真是个天才！只要我认为问题来自完全不同的原因，我就一直在寻找解决方法。从来没有想过从 css 的角度来查找东西。非常感谢！

【参考方案2】：

只需将此类添加到您的 .css 文件中即可。 .select2-search__fieldwidth:100% !important;