如何使用 Select2 4.0 使下拉菜单向左打开

Question

我在 jsfiddle 中看到一个例子，如果屏幕太小，下拉框会向左打开：

$(document).ready(function() { 
    $("#e1").select2({dropdownCssClass : 'bigdrop'}); 
});

#e1 {
    width: 100px;       
}
.bigdrop{
    width: 600px !important;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/select2/3.3.2/select2.js"></script>
<link href="http://cdn.jsdelivr.net/select2/3.3.2/select2.css" rel="stylesheet"/>

<body>
    <select id="e1">
       <option value="AL">Alabama</option>
       <option value="WY">Wyoming</option>
       <option value="WY">very long long long text</option>
       <option value="WY">very long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long text</option>
    </select>
</body>

原始片段在这里：

http://jsfiddle.net/ewwAX/1/

我正在使用 select2 4.0 完整版，我希望有相同的行为。此外，我希望我的下拉框也始终向左打开，但即使代码相同，由于库版本不同，我也无法做到这一点：

https://jsfiddle.net/vv6hgos5/

我在这里搜索和阅读问题，但我发现的只是防止页面太小时下拉菜单切换为下拉菜单的方法，这不是我要找的。

我怎样才能做到这一点？

Answer 1

不幸的是，对此没有明确的答案。 select2 的这个特性根本无法定制。因此，为了解决这个问题，我们求助于 CSS 小技巧，并将下拉菜单的 margin-left 设置为满足我们需求的特定负值：

.bigdrop-left {
    margin-left: -200px;
}

fiddle可以在这里看到：

https://jsfiddle.net/vv6hgos5/1/

请注意，无论如何，盒子总是向左打开。

如何使用 Select2 4.0 使下拉菜单向左打开

How to make dropdown menu open left using Select2 4.0

javascript

jquery

drop-down-menu

jquery-select2-4