javascript - select2 中的右对齐下拉菜单

Question

有没有办法在 select2 中使用 dropdownAutoWidth: true 右对齐下拉菜单，而不是标准的左对齐？我希望选择保持不变，但下拉菜单向左移动，以便与右侧的选择对齐。请参阅下面对齐错误的代码段...

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

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

编辑 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 选项，你的生活会更轻松 ;)