jquery-select2选定值部分可见

Question

由于某些原因，在某些情况下，select2 (版本4.0.3)会显示部分选定的值。

HTML：

Selected value partially visible<select name="example" id="wraps">
<option value="71.0">Harju maakond</option>
<option value="73.0">Hiiumaa</option>
<option value="48.0">Ida-Virumaa</option>
</select>
<br>
Selected value fully visible
<select name="example2">
<option value="71.0">Harju maakond</option>
<option value="73.0">Hiiumaa</option>
<option value="48.0">Ida-Virumaa</option>

</select>

JS：

$('#wraps').select2({width: 'resolve', dropdownAutoWidth : true});

结果：

result

小提琴也叫https://jsfiddle.net/nhqzzf64/2/

使用默认下拉菜单时，我看到的值是"Harju maakond“，但使用select2时，我看到的是"Harju ma...”

设置dropdown的确切宽度不是一个选项，因为我不知道最大宽度。内容正在发生变化。

宽度：'auto‘选项也不合适，因为我想在页面渲染后固定宽度。

有什么解决方案吗?如何将宽度设置为与原始下拉相同？

Answer 1

您可以尝试使用纯CSS展开select2框(请注意!important规则)：

.select2-container {
  width: 200px !important;
}

请参阅此fiddle。

Answer 2

在4.0.3中似乎不支持"resolve“选项

最好的办法是在初始化select2时使用width: 100%，并将元素放在您可以控制其宽度的容器中。

$('#wraps').select2( { 
    width: '100%'
});

​

$('#wraps').select2({width: '100%'});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>

Selected value fully visible
<select name="example" id="wraps">
<option value="71.0">Harju maakond</option>
<option value="73.0">Hiiumaa</option>
<option value="48.0">Ida-Virumaa</option>
</select>

<p></p>
Selected value fully visible
<select name="example2">
<option value="71.0">Harju maakond</option>
<option value="73.0">Hiiumaa</option>
<option value="48.0">Ida-Virumaa</option>
</select>

​

Answer 3

我能够解决获取原始宽度()的问题，并通过css指定字体大小，然后使用select2()转换下拉列表。