Question

我正在为select元素使用多选jquery插件。外部div（包含多选框）具有最大高度。如果我打开多选框，它将被切断，我必须向下滚动才能看到所有选项：

$('select').multipleSelect();

#outer {
  max-height: 110px;
  overflow: auto;
  background-color: green;
  color: white;
}
#select {
  width: 200px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.min.js"></script>
<div id="outer">
  <p>
    Below you find a multiple select box that should overflow the outer div.
  </p>
  <label for="select">Multiple select:</label>
  <select id="select">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
  </select>
  <p>
    Scroll to the button when the select box is open.
  </p>
  <button>
    Do nothing
  </button>
</div>

JSFiddle

如果我打开多选框，则所有选项都应该可见。所以选项应该溢出外部div。我怎样才能做到这一点？

如果我将div.ms-parent的位置设置为fixed我会在向下滚动之前获得所需的行为，因为选择框已修复且未与其他内容一起移动。

在这种情况下使用z-index也不起作用。

Answer 1

此插件上的container选项实现了这一点。尝试启动这样的插件：

$('select').multipleSelect({
   container: "body",
});

https://jsfiddle.net/8mdxuz1w/1/

然后，您需要限制下拉列表的宽度。

Answer 2

我用JQ制作了一种oldschool解决方案（因为我不熟悉multipleselect（）插件）

见这里＆gt;的 jsfiddle

代码：

$('select').multipleSelect(); var sTop = $('.ms-parent ').offset().top, sHeight = $('.ms-parent ').height() $('.ms-drop.bottom').css('top',sTop+sHeight)

CSS

.ms-drop { position:fixed; width:200px; }

要让.ms-drop离开它的容器，您需要将position:fixed设置为它。然后用JQ我通过找到top offset().top及其高度.ms-parent来计算它的top位置。这两个组合会给出.ms-drop
的ms-drop位置希望它有所帮助。

编辑：jsFiddle

如果你希望#outer保持在同一位置而不是在绿色div（top）内滚动时向下滚动，你应该添加一个滚动函数来计算滚动距离并扣除它来自ms-drop的{{1}}位置，因此它将始终保持在该位置

所以你将拥有以下JQ：

$('select').multipleSelect(); var sTop = $('.ms-parent ').offset().top, sHeight = $('.ms-parent ').height() $('.ms-drop.bottom').css('top',sTop+sHeight) $("#outer").on("scroll",function(){ var oScroll = $(this).scrollTop() $('.ms-drop.bottom').css('top',sTop+sHeight-oScroll) })

如何实现只有一个嵌套元素应该溢出它的父元素

2 个答案: