Question

下午好，

我正在使用jQuery＆＃34;选择＆＃34;插件＆＃34;选择＆＃34;落下。问题是下拉列表位于可滚动区域中。在这种情况下，下拉项目会被删除＆＃34; cut＆＃34;通过外部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();

如果您尝试在对话框中打开下拉列表，则可以看到它正在被切断。

这个问题有解决方法吗？

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

Answer 1

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

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

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

Answer 2

实际上style=" overflow-y:auto;"需要设置为<select>标记，您已将其设置为<div>标记错误，

将您的<select>标记更改为

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

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

HTH

JQuery选择下拉列表放置在滚动条内时会被“剪切”

2 个答案: