如何将 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">