当放置在滚动条内时，JQuery 选择的下拉菜单会被“剪切”答案

【问题标题】：JQuery chosen dropdown gets “cut” when placed inside scrollbar当放置在滚动条内时，JQuery 选择的下拉菜单会被“剪切”
【发布时间】：2016-08-05 18:24:41
【问题描述】：

下午好，

我正在为“选择”下拉菜单使用 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();

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

这个问题有解决办法吗？

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

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

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

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

【讨论】：

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

【解决方案2】：

其实style=" overflow-y:auto;"需要设置成<select>标签，你设置错了<div>标签，

将您的 <select> 标签更改为，

   <select id="stateLicenseSelect" style="width: 205px;" style=" overflow-y:auto;">

更新小提琴：http://jsfiddle.net/083z9ctL/3/

HTH

【讨论】：

感谢您的回答。但我担心我需要将选择放在可滚动区域内，所以我不能将“overflow-y”属性移动到选择标签。在选择标记之后，可能有其他控件不适合外部 div，这就是需要滚动条的原因。我改进了我的示例，以更清楚地说明我想要实现的目标：jsfiddle.net/olegbevz/083z9ctL/5。