Select2 多框占位符不显示隐藏然后使其可见

Question

我在 <select multiple> 中使用 select2()。我有一个 placeholder 在 select 中。我正在做的是最初我隐藏 select 包含 div 然后我让它可见。在这种情况下，最初未显示占位符。

如果我们不执行此隐藏和阻止操作，那么它工作正常。

FIDDLE

Answer 1

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

我检查过你的fiddle。

这包含 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>

Answer 2

只需将此 class 添加到您的 .css 文件中。 .select2-search__field{宽度:100% !important;}

Select2 多框占位符不显示隐藏然后使其可见

Select2 multiple box placeholder not showing on hide then make it visible case

select

placeholder

show-hide

select2

代码段（非功能性，需要 select2 个库）：