隐藏在模态弹出可滚动部分后面的jQuery多选下拉值答案

【问题标题】：jQuery multiselect dropdown values hidden behind modal pop up scrollable section隐藏在模态弹出可滚动部分后面的jQuery多选下拉值
【发布时间】：2018-10-24 10:36:58
【问题描述】：

我使用了 Jquery 多选下拉菜单并为可滚动部分设置了模态体的固定高度。问题是多选下拉菜单隐藏在可滚动部分的后面，我想将它显示在可滚动部分的顶部。

请查看下面的截图：

HTML代码：

<div class="form-group">
    <label class="multiChkLbl required">Biological measures</label>
    <select id="multiChkBioMasures" class="form-control" name="bioMasures" multiple="multiple" value="${IdentifierData.identifier66}">
        <option value="Density">Density</option>
        <option value="Abundance">Abundance</option>
        <option value="Size">Size</option>
        <option value="Distribution/home range">Distribution/home range</option>
        <option value="Biodiversity">Biodiversity</option>
        <option value="Food web/energetics">Food web/energetics</option>
        <option value="Recruitment">Recruitment</option>
    </select>
</div>

CSS：模态可滚动部分高度设置如下

height: 300px;
overflow-y: auto;
overflow-x: hidden;

jquery：加载中

$("#multiChkBioMasures").multiselect();

【问题讨论】：

解决方案可能主要是CSS，也可能是一些JS，但请创建一个minimal reproducible example。
是的，我们很容易快速通知问题，至少提供JsFiddle，Codepen链接。
@Chris G 和 Lakshman Kambam 我为上述问题创建了 JSFiddle。请找到 JSFiddle 的链接是：jsfiddle.net/bg1wy5eo/28
这里有一个快速修复：jsfiddle.net/khrismuc/9L76mjgp（我只是添加了填充）我可以看到这个快速而好的解决方案；唯一想到的是将弹出的<ul>移动到<body>，使其出现在固定模态上方；这也需要手动定位。

标签： javascript jquery html css

【解决方案1】：

使用下面的这个类来调整你的多选容器，你知道你的模态的高度，你可以给出顶部位置像素的高度。

.multiselect-container { 位置：固定！重要顶部：0px ！重要左：50px！重要 }

【讨论】：