如何在 Windows 调整大小时调整所选 jquery 下拉列表的大小

Posted 2023-03-06

【中文标题】如何在 Windows 调整大小时调整所选 jquery 下拉列表的大小

【英文标题】：How to resize a chosen jquery dropdownlist on windows resize

【发布时间】：2014-12-13 01:46:27

【问题描述】：

我有以下 asp.net 代码，它使用选择的 jQuery 来自定义 dropdownlist：

<asp:DropDownList ClientIDMode="Static" ID="ddlProvider" CssClass="setProvDDStyle" runat="server" AppendDataBoundItems="true"></asp:DropDownList>
<asp:DropDownList ClientIDMode="Static" ID="ddlSpecialty" CssClass="chosen-select setProvDDStyle" runat="server" AppendDataBoundItems="true"></asp:DropDownList>

我使用下面的脚本来初始化dropdownlist：

<script type="text/javascript">
    var config = 
        '.chosen-select': ,
        '.chosen-select-deselect':  allow_single_deselect: true ,
        '.chosen-select-no-single':  disable_search_threshold: 10 ,
        '.chosen-select-no-results':  no_results_text: 'Oops, nothing found!' ,
        '.chosen-select-width':  width: "95%" 
    
    for (var selector in config) 
        $(selector).chosen(config[selector]);
    
</script>

CSS：

.setProvDDStyle

    width: 100%;

这是输出：

我故意将提供者下拉列表中的 chosen-select 样式设置为创建样式。当我调整浏览器窗口的大小时，您可以看到dropdownlist 的宽度与chosen select 样式不会根据容器调整大小。我在windows.resize() 函数中添加了上述脚本，但实际上并没有做任何事情。

我将如何完成样式化的下拉列表以根据容器的大小调整大小

【参考方案1】：

我将您的下拉列表包装在一个容器 DIV 中：

<div id="ddlSpecialtyContainer">
  <asp:DropDownList ClientIDMode="Static" ID="ddlSpecialty" CssClass="chosen-select setProvDDStyle" runat="server" AppendDataBoundItems="true"></asp:DropDownList>
</div>

然后我添加了一个窗口resize 事件处理程序，它调整下拉列表容器内动态生成的jQuery选择控件的大小。

$(window).resize(function () 
  var width = $("#ddlSpecialtyContainer")[0].offsetWidth + "px";
  $("#ddlSpecialtyContainer .chosen-container").css("width", width);
);

这似乎按您的要求工作。

【讨论】：

ddlSpecialtyContainer 我想应该是 100% 宽度？

如果这是你想要的。

如果您查看 jQuery 选择的小部件的源代码，您将看到一个名为 set_up_html 的函数。此函数在生成所选小部件时调用，它会根据下拉列表的当前大小将固定宽度应用于所选小部件。这只会运行一次，因此您必须添加一个调整大小事件处理程序，以便在屏幕尺寸发生变化时随时更改所选小部件的宽度。