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

Question

我在 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');

Answer 1

解决办法就是改

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

至

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

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

How to extend the select2 component drop-down beyond the jquery modal dialog

jquery-ui-dialog

jquery-select2