select2中的右对齐下拉菜单

Question

是否有一种方法可以使select2中的下拉菜单与dropdownAutoWidth: true右对齐，而不是标准的左对齐？我希望选择保持不变，但下拉列表将移至左侧，以便与右侧的选择对齐。参见下面的代码段，其对齐方式有误...

注意：我想要的选择和下拉菜单的大小如图所示。

编辑//更新，建议添加direction: rtl; text-align: right;。这只会使文本右对齐。我希望整个下拉菜单与其上方的所选选项右对齐。例如。下拉菜单应突出显示在所选选项的左侧，而不是右侧。

编辑2 //更新为.select2-dropdown { left: -69px !important; }，这使它看起来像我想要的样子，但是有没有办法不必将固定值设置为-69px？

$(".form-control").select2({
    width: '100px',
    dropdownAutoWidth : true,
});

.select2-container--default .select2-results > .select2-results__options { direction: rtl; text-align: right; }
.select2-dropdown {
left:-69px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="form-control">
  <option selected="selected">orange</option>
  <option>white</option>
  <option selected="selected">purple</option>
</select>

我希望它看起来像这样，但是没有固定的值可以实现它。

Answer 1

由于您希望选择和下拉菜单具有不同的大小，因此这是我的解决方案，它使用select2内置选项和一些CSS ，但可能不是一个完美的选择。

制作rtl非常简单，只需使用dir，但我们需要传递其他一些选项，如下所示：

$('select').select2({
    dir: "rtl",
    dropdownAutoWidth: true,
    dropdownParent: $('#parent')
});

这里的密钥是dropdownParent，同样，您需要按如下方式编辑HTML：

<div id='parent'>
    <select>
      <option selected="selected">orange</option>
      <option>white</option>
      <option selected="selected">purple</option>
    </select>
</div>

最后，您需要一些CSS：

#parent {
  /* can be any value */
  width: 300px;
  text-align: right;
  direction: rtl;
  position: relative;
}
#parent .select2-container--open + .select2-container--open {
  left: auto;
  right: 0;
  width: 100%;
}

您可以在操作中here on codepen看到它

如果您有多个选择，则需要一些JS代码来处理dropdownParent选项。顺便说一句，如果您删除dropdownAutoWidth选项，您的生活将会更加轻松；）

Answer 2

如果仍在寻找替代方法。我最近也需要实现这一目标，而RTL答案对于我的项目而言并不是可行的解决方案。如果您使用的是select2.js（4.0.6），并且不介意修改脚本，则可以替换以下代码，并通过向目标元素添加类来实现正确的定位。

查找第4381至4384行

var css = {
  left: offset.left,
  top: container.bottom
};

替换以下内容

var containerWidth = this.$container.outerWidth()
var right = ($("body").outerWidth() - (offset.left + containerWidth));

if (this.$element.hasClass("right-align")) {
    var css = {
        right: right,
        top: container.bottom
    };
} else {
    var css = {
        left: offset.left,
        top: container.bottom
    };
}

将类右对齐添加到目标选择输入中。

<select id="client_select" class="form-control right-align">
     <option value="01">Example One</option>
     <option value="02">Example Two</option>
     <option value="03">Example Three</option>
</select>

这应该是您所需要的。如果目标元素具有类，则代码将使用右侧而不是左侧定位来放置下拉列表。如果将容器设置为父级，则应该工作相同。但是，这尚未经过彻底测试。这可能不是一个很好的解决方案，但是它不需要使用CSS覆盖任何内容。在完成更新以添加用于处理右对齐下拉菜单的选项之前，应该先解决这一问题。希望对您有所帮助。

Answer 3

使用dir：“ rtl”初始化选择，例如：

$('select').select2({
   dir: "rtl,
   ...
   ...
   ...
   ...
   })

Answer 4

我认为这将帮助您获得真正需要的东西。如果您无法将其回信给我

select {
  text-align-last: right;
}

option {
  direction: rtl;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="form-control">
  <option selected="selected">orange</option>
  <option>white</option>
  <option selected="selected">purple</option>
</select>

Answer 5

select的选项标签不能由CSS修改，需要完成jquery插件 http://selectric.js.org/demo.html 它应该可以帮助您我的朋友