出现时JQuery“选择”下拉菜单答案

【问题标题】：JQuery "Chosen" dropdown cut when appearing出现时JQuery“选择”下拉菜单
【发布时间】：2014-10-02 09:46:45
【问题描述】：

我使用 JQuery "Chosen Dropdowns" 插件并且有一个问题是当下拉菜单出现在里面时尽管所选选择的父 div 具有 css 属性 overflow: visible

通常，当我使用没有任何样式的默认选择时效果很好

也许有人有同样的问题或可以提供任何解决方案？

HTML：

<div class="addNewLicense" style="overflow:visible;">
<table>
    <tr>
        <td>
            <span>Start date: </span>
        </td>
        <td>
            <input type="text" id="startLicenseDate" placeholder="Start Date..." style="width: 200px; height: 24px;" />
        </td>
    </tr>
    <tr>
        <td>
            <span>End date: </span>
        </td>
        <td>
            <input type="text" id="endLicenseDate" placeholder="End Date..." style="width: 200px; height: 24px;" />
        </td>
    </tr>
    <tr>
        <td>
            <span>State Name: </span>
        </td>
        <td>
            <select id="stateLicenseSelect" style="width: 205px; height: 30px;">

            </select>
        </td>
    </tr>
</table>

Javascript：

    $("#stateLicenseSelect").chosen({ width: "200px", disable_search: true });
    $(".addNewLicense").dialog('open');

【问题讨论】：

已编辑，还通过单独的 Ajax-Request 选择内容初始化，然后选择选择更新。
@Alex44 你也可以提供你的 CSS 吗？
请在工作网站上发布链接

标签： javascript jquery html css jquery-chosen

【解决方案1】：

jQuery UI 模态框默认具有隐藏值溢出，以防止任何过大的对象离开框边界。它不会从浏览器中裁剪原生 UI 控件，因为它会破坏用户体验规则，但对于脚本生成的 UI，它会。 Chosen 将选择输入元素替换为一些绝对定位的元素，这些元素将被隐藏溢出。

为防止出现此问题，您只需从 jQuery UI 覆盖溢出隐藏属性：

.ui-dialog{
overflow: visible !important;
}

我在这里做了一个简单的例子：http://jsfiddle.net/e57gase7/

如果您尝试删除示例中的 CSS，这看起来像是您的问题。

【讨论】：

因为初始浏览器支持可能有问题：最好这样做：.ui-dialog-content { overflow: visible; }
哦，太酷了@mikewasmike，问题到底是怎么回事？如果一切都搞砸了，不想再犯同样的错误:)
@marcovega 我不太记得是哪个属性了，但我曾经发现主流浏览器的初始值不同，所以最好具体一点。
谢谢@mikewasmike，我已经更新了答案，所以每个人都很安全:)

【解决方案2】：

.mCSB_container {
overflow:visible !important;
}

为我工作！！！

【讨论】：

更多描述会有所帮助。

【解决方案3】：

尝试将您选择的替换为select2。它具有更多功能，并且应该适用于您的情况。

【讨论】：

【解决方案4】：

这段代码对我有用：

   $(function () {
       $("#YourDropDownID").parent().css("overflow", "visible");
   })

这在您不知道父 div/dialog 的类或 id 时很有用

【讨论】：