代码之家 › 专栏 › 技术社区 › SeaBass

select2中的右对齐下拉菜单

jquery-select2 css html jquery javascript

SeaBass · 技术社区 · 7 年前

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

注意:我想要不同大小的选择和下拉列表,如图所示。

编辑//Updated with suggestion to add 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>

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

5 回复 | 直到 7 年前

Mehdi Dehghani 7 年前

由于您希望有不同大小的select和下拉列表,下面是我的解决方案 使用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代码来处理 下拉父级 选择。顺便说一句,如果你搬走你的生活会更轻松 dropdownAutoWidth 选项;)

RyDog 6 年前

如果仍在寻找替代方法。我最近也需要实现这一点,而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覆盖任何内容。应该做的技巧,直到更新,以添加一个选项来处理右对齐下拉列表。希望有帮助。

Omid Ahmadyani 6 年前

init select with dir:“rtl”例如:

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

-1

Ashu 7 年前

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

-2

Ashu 7 年前

我想它能帮你得到你真正需要的东西。如果你不能得到它,我会回来的

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>