select2中的右对齐下拉菜单

Posted 2023-05-07

【中文标题】select2中的右对齐下拉菜单

【英文标题】：Right-align dropdown menu in select2

【发布时间】：2019-01-13 03:28:26

【问题描述】：

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

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

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

Edit 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>

我希望它看起来像这样，但不是用固定值来实现它。

【参考方案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 选项，您的生活会更轻松；）

【参考方案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 覆盖任何东西。在进行更新以添加用于处理右对齐下拉列表的选项之前，应该这样做。希望对您有所帮助。

【讨论】：

谢谢，我去测试一下！

请注意，如果您希望它是动态的（即您不知道选择是否会在页面的最右边），您可以尝试：` var containerWidth = this.$container.外宽（）； var bodyWidth = document.body.clientWidth; if (bodyWidth - offset.left

【参考方案3】：

init select with dir: "rtl" 如：

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

【参考方案4】：

我设法让它的工作方式略有不同。我需要将下拉菜单向左展开，同时保持选项文本左对齐。我觉得值得分享。这是设置：

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<div id="select2-container">
    <select class="form-control">
        <option selected="selected">orange</option>
        <option>white</option>
        <option>purple</option>
    </select>
</div>

CSS

.select2-container.select2-container--default.select2-container--open 
    right: auto;
    left: unset !important;


.select2-container.select2-container--default.select2-container--open .select2-dropdown.select2-dropdown--below 
    width: fit-content !important;
    left: unset;
    right: 0;

JavaScript

$('.form-control').select2( dropdownParent: $('#select2-container') );

结果如下：

【参考方案5】：

select的option标签不能被css修改，需要做jquery插件 http://selectric.js.org/demo.html 它应该对你有帮助，我的朋友

【讨论】：

请再次阅读我的问题。我不是要修改选项标签。我想重新定位一个 select2 下拉菜单。

【参考方案6】：

我认为它会帮助你得到你真正需要的东西。如果你不让我回来

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>

【讨论】：

谢谢！我更新了我上面的帖子。不确定是否可以使用纯 css 或是否需要一些 js 计算。