javascript - 放置在滚动条内时，JQuery 选择的下拉列表获取 “cut”

Question

下午好

我正在为“选择”下拉菜单使用 jQuery“选择”插件。问题是下拉菜单位于可滚动区域。在这种情况下，下拉项会被外部 div 元素“剪切”。我创建了一个简单的示例:http://jsfiddle.net/olegbevz/083z9ctL/1

<div class="dialog" style="height: 100px;">
  <div style="height:100px; overflow-y:auto">
        <select id="select" style="width: 205px;">
                <option>Some Value</option>
                <option>Some Value</option>
                <option>Some Value</option>
                <option>Some Value</option>
                <option>Some Value</option>
                <option>Some Value</option>
                <option>Some Value</option>
                <option>Some Value</option>
                <option>Some Value</option>
    </select>
  </div>      
</div>

$("#select").chosen({ width: "200px", disable_search: false });
$(".dialog").dialog();

如果您尝试打开对话框中的下拉菜单，您会看到它正在被剪切。

这个问题有什么解决办法吗？

更新:正如我所提到的，我需要将选择放在可滚动区域内，因此我无法删除“overflow-y”属性。在 select 标签之后可能有其他控件不适合外部 div，这就是需要滚动条的原因。我改进了我的示例以更清楚地说明我想要实现的目标:jsfiddle.net/olegbevz/083z9ctL/5 .

Answer 1

添加新的包含 div，其 zindex 设置为高于上层的 div，并从上层的 div 中删除 overflow-y

 <div style="height:100px;">
  <div style="z-index:1000;">

http://jsfiddle.net/083z9ctL/2/