时间戳

首页 > 解决方案 > 在滚动容器 div 内时的多选下拉问题

jquery - 在滚动容器 div 内时的多选下拉问题

问题描述

我希望 Multiselect Dropdown 浮动在其容器（滚动 div）上，就像常规选择一样。

我尝试更改 div 溢出选项，但这会导致其中的其他元素行为不正确（即，它们显示，而不是触发滚动）。

这个问题之前已经完美暴露了：

多选下拉 z-index 在滚动容器 div 中不起作用

...但作者对似乎摆脱溢出的答案感到满意。

我对上一个链接的代码进行了轻微修改，在所有内容下方添加了第二个常规选择。它必须在 div 向下滚动时显示，而多选应该浮动，忽略溢出设置。

那可能吗？

这是代码（95% 只是上面帖子的副本）：

http://jsfiddle.net/danielnh/1pwLncmr/2/

#scrollMe {
height:150px;
background-color:yellow;
overflow-y: scroll;
overflow-x:hidden;
padding:20px;
}

..

        <div id="scrollMe" class="col-md-12">
            <select id="multiSelect" class="form-control multiselect" multiple="multiple">
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option>
            </select>
            <br>
            <br>
            <select class="form-control">
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option>
            </select>
            <br><br><br><br>
             <select class="form-control">
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option>
            </select>
        </div>

标签： jqueryhtmlcss

解决方案

选项 div 需要固定或绝对位置，才能忽略溢出。

看看下面并阅读评论，我在Multiselect函数中添加了两行代码。

        $('#multiSelect').multiselect({
            includeSelectAllOption: true,
            buttonWidth: '200px', 
        }).parent().find(".dropdown-toggle").click(function(){ 
        // MyCode
        // handle the position of the fixed div
        var offSet = $(this).offset();
        $(this).parent().find(".multiselect-container").css({
             position:"fixed",
             top:offSet.top + $(this).outerHeight(),
             left: offSet.left
          });
        });

推荐阅读