当使用溢出:隐藏到外部div时，Jquery选择插件不能很好地显示下拉列表

Question

我试图显示下拉框的顶部外div但它外div包装下拉框?

正常的html选择工作良好，但选择不显示下拉列表.....

Demo Fiddle: Fiddle

$(function(){
    $(".chosen-select").chosen();
})

html:

  <div style="height:150px;width:250px;overflow-y:auto;overflow-x:hidden;margin:20px;background: gray;">
    <table>
        <tbody>
            <tr>
                <td>
                    <select  style="width: 200px; ">
                         <option value="0"></option>
                         <option value="1">One</option>
                         <option value="2">Two</option>
                         <option value="3">Three</option>
                    </select>
                </td>
            </tr>
           .
           .
       </tbody>
   </table>
  </div>

Answer 1

哇，5年了还没找到答案?

使用此代码并为选择框添加宽度。

 $(".chosen-select").chosen({width: "95%"});

将解决您的问题

Answer 2

这是因为selected将下拉菜单呈现为div和子div。确保将所有父容器的overflow属性设置为"可见"。

普通的html select在这里工作，因为本地html行为

Answer 3

Try This

    $('.chosen-select').on("chosen:showing_dropdown", function () {
            $(this).parents("div").css("overflow", "visible");
        });