Jquery 如何将所选下拉列表扩展到包含它的对话框之外

我在jQueryUI对话框中有一个

Html.DropDownList

样式。项目列表足够长，打开时列表会被对话框窗口的边框切断

有没有办法将所选下拉列表的下拉部分扩展到包含它的对话框的边界之外

我希望结果与

HTML:

<div class="ui-dialog" id="deleteControl">
    <div class="mws-form-cols clearfix">
        <label>Select a document to delete:</label>
        @Html.DropDownList("fileName", Model.fileDropdown, "", new { id = "fileDropdown", onchange = "$('#deleteDocName').val($('#fileDropdown').val())", style = "display:inline;" })
    </div>
    <!--Removed code for a button row here-->
</div> 

$("select").chosen();

$("#deleteControl").dialog({
    autoOpen: false,
    title: "Remove Documents",
    modal: true,
    resizable: false,
    width: "60%"
});

<!--Removed unrelated code-->
<div tabindex="-1" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" role="dialog" aria-labelledby="ui-dialog-title-deleteControl" style="outline: 0px; left: 319px; top: 421.5px; width: 60%; height: auto; display: block; z-index: 1002;">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-deleteControl">Remove Documents</span><a class="ui-dialog-titlebar-close ui-corner-all" role="button" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
</div>
<div class="ui-dialog ui-dialog-content ui-widget-content" id="deleteControl" style="width: auto; height: auto; min-height: 100px;" scrolltop="0" scrollleft="0">
    <div class="mws-form-cols clearfix">
        <label>Select a document to delete:</label>
        <select name="fileName" id="fileDropdown" style="display: none;" onchange="$('#deleteDocName').val($('#fileDropdown').val())">
            <option value=""></option>
            <option value="Modal Test">Modal Test</option>
            <option value="Second Rename">Second Rename</option>
            <option value="Test">Test</option>
            <option value="Inner Test">Inner Test</option>
        </select>
        <div title="" class="chosen-container chosen-container-single" id="fileDropdown_chosen" style="width: 389px;"><a tabindex="-1" class="chosen-single chosen-default"><span> </span><div><b></b></div></a>
            <div class="chosen-drop">
                <div class="chosen-search">
                    <input type="text" autocomplete="off">
                </div>
                <ul class="chosen-results">
                    <li class="active-result" data-option-array-index="1">Modal Test</li>
                    <li class="active-result" data-option-array-index="2">Second Rename</li>
                    <li class="active-result" data-option-array-index="3">Test</li>
                    <li class="active-result" data-option-array-index="4">Inner Test</li>
                </ul>
            </div>
        </div>
    </div>
</div></div>

呈现的HTML:

<div class="ui-dialog" id="deleteControl">
    <div class="mws-form-cols clearfix">
        <label>Select a document to delete:</label>
        @Html.DropDownList("fileName", Model.fileDropdown, "", new { id = "fileDropdown", onchange = "$('#deleteDocName').val($('#fileDropdown').val())", style = "display:inline;" })
    </div>
    <!--Removed code for a button row here-->
</div> 

$("select").chosen();

$("#deleteControl").dialog({
    autoOpen: false,
    title: "Remove Documents",
    modal: true,
    resizable: false,
    width: "60%"
});

<!--Removed unrelated code-->
<div tabindex="-1" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" role="dialog" aria-labelledby="ui-dialog-title-deleteControl" style="outline: 0px; left: 319px; top: 421.5px; width: 60%; height: auto; display: block; z-index: 1002;">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-deleteControl">Remove Documents</span><a class="ui-dialog-titlebar-close ui-corner-all" role="button" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
</div>
<div class="ui-dialog ui-dialog-content ui-widget-content" id="deleteControl" style="width: auto; height: auto; min-height: 100px;" scrolltop="0" scrollleft="0">
    <div class="mws-form-cols clearfix">
        <label>Select a document to delete:</label>
        <select name="fileName" id="fileDropdown" style="display: none;" onchange="$('#deleteDocName').val($('#fileDropdown').val())">
            <option value=""></option>
            <option value="Modal Test">Modal Test</option>
            <option value="Second Rename">Second Rename</option>
            <option value="Test">Test</option>
            <option value="Inner Test">Inner Test</option>
        </select>
        <div title="" class="chosen-container chosen-container-single" id="fileDropdown_chosen" style="width: 389px;"><a tabindex="-1" class="chosen-single chosen-default"><span> </span><div><b></b></div></a>
            <div class="chosen-drop">
                <div class="chosen-search">
                    <input type="text" autocomplete="off">
                </div>
                <ul class="chosen-results">
                    <li class="active-result" data-option-array-index="1">Modal Test</li>
                    <li class="active-result" data-option-array-index="2">Second Rename</li>
                    <li class="active-result" data-option-array-index="3">Test</li>
                    <li class="active-result" data-option-array-index="4">Inner Test</li>
                </ul>
            </div>
        </div>
    </div>
</div></div>

删除文档
选择要删除的文档：
模态试验
第二次更名
试验
内部测试

模态测试
第二次重命名
测试
内部测试

我们真的需要看一些代码

但是如果你看看这个提琴，我已经限制了父包装的高度，下拉列表延伸到它下面（当然是在Chrome中）

CSS:

HTML:

<select id="actionInput01" name="action">
                        <option value="">Go to</option>
                        <option value="ViewTransactions">View transactions</option>
                        <option value="MyPayees">Pay or view existing payees</option>
                        <option value="SetUpANewPayment">Set up a new payment</option>
..... etc

去
查看交易记录
支付或查看现有收款人
建立一个新的支付系统
..... 等

编辑

---

可能存在隐藏溢出的问题，但如果此解决方案不起作用，我认为绝对定位也可能有帮助，但正如我提到的，您需要共享一些代码

可以，请检查小提琴

HTML

<div class="ui-dialogue">

    <select>
        <option>Option</option>
        <option>Option</option>
        <option>Option</option>
        <option>Option</option>
        <option>Option</option>
        <option>Option</option>
        <option>Option</option>
    </select>
</div>

---

在这种情况下，您需要为包装器提供固定高度。可能存在这样的情况：您的包装器div通过CSS应用了overflow:hidden属性，请确保将其更改为overflow:visible。

Hmmm，我想我们需要平面html（如果您只是从浏览器中剪切并粘贴块，这会容易得多。不幸的是，您无法在JSFIDLE中测试动态后端内容。还选择了一个js库来设置输入样式（如selects），但我确信在他们的文档中一定有一个选项可以满足您的需求。因此，事实上，这里的答案对您没有帮助，因为它们指的是标准的浏览器输入类型。选择的内容覆盖了那些具有不同元素的内容，因此可以设置样式。如果在选择的文档中有一个选项可以满足我的需求，我还无法找到它。我将在几分钟内添加平面HTML。@nummaroth我在这里制作了一个JSFIDLE：我还从中选择了js、css和proto.js文件（您可以在JSFIDLE的外部资源选项卡中看到这些文件）。但是，我认为肯定缺少一些信息。但这只是一个开始。如果我们可以帮助您解决此问题，您可以在此添加/编辑代码并在此处回复。dialog（）函数中出现错误。我认为除非您可以复制代码（即使它只是框架或最基本的代码）任何人都很难帮助您。您是否能够调查父包装的属性（溢出：隐藏等）？@lharby我已经调查了父包装器的属性。我找不到任何看起来会干扰的属性，但是直接在对话框上设置

溢出：可见

可以解决问题，所以我一定是找不到了。谢谢你的帮助。