如何将 select2 组件下拉菜单扩展到 jquery 模态对话框之外答案

【问题标题】：How to extend the select2 component drop-down beyond the jquery modal dialog如何将 select2 组件下拉菜单扩展到 jquery 模态对话框之外
【发布时间】：2017-07-31 21:21:40
【问题描述】：

我在 jquery 模式对话框中使用 select2 组件。我需要下拉显示超出对话框的边界。现在一个长的下拉菜单被对话框边框截断。

这是一个例子和jsfiddle:

<div id="test-dialog" class="widget" style="display:none;">
    <form id="Newfrm" name="Newfrm" method="post">
        <fieldset id="Field" step="1" style="margin-top: 10px;">
            <label for="NewField" style="width:90px; text-align:right;">Field</label>
            <select name="NewField" id="NewField">
                <option value=""></option>
                <option value="1">test1</option>
                <option value="2">test2</option>
                <option value="3">test3</option>
                <option value="4">test4</option>
            </select>
        </fieldset>
    </form>
</div>

$("#NewField").select2({
            placeholder: "Select a Field",
            allowClear: true,
            dropdownParent: $('#test-dialog')
        });

$("#test-dialog").dialog({
            width: "550",
            resizable: false,
            modal: true
        }).dialog('option', 'title', 'New Test Dlg');

【问题讨论】：

标签： jquery-select2 jquery-ui-dialog

【解决方案1】：

解决办法是改变

<div id="test-dialog" class="widget" style="display:none;">

到

<div id="test-dialog" class="widget" style="display:none; overflow:visible !important">

【讨论】：