Question

我选择了一个盒子里的下拉菜单。盒子有固定的高度和宽度。每当我从下拉列表中选择一个值时，该框就会显示滚动条。我想在框上方显示下拉框的选项。我该怎么办？

检查我的代码

HTML

<div id="wrapper">
    <select id="sel" style="width: 100px;">
        <option value="1">Val-1</option>
        <option value="1">Val-1</option>
        <option value="1">Val-1</option>
        <option value="1">Val-1</option>
        <option value="1">Val-1</option>
        <option value="1">Val-1</option>
        <option value="1">Val-1</option>
        <option value="1">Val-1</option>
        <option value="1">Val-1</option>
        <option value="1">Val-1</option>
        <option value="1">Val-1</option>
        <option value="1">Val-1</option>
    </select>
</div>

CSS

#wrapper {
    width: 300px;
    height: 100px;
    overflow: scroll;
    border: 1px solid #000;
}

Answer 1

将此规则添加到CSS或更改所选.CSS文件中的CSS规则

.chosen-container{
    position:absolute !important;
}

DEMO

Answer 2

overflow: scroll迫使下拉列表保留在div中。

删除溢出样式，它将在框外扩展。

Example

Answer 3

问题不在于你的溢出属性或其他东西。它是因为你的jquery。

<强>结果

enter image description here

显示滚动区域的元素

3 个答案: