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

Question

我有以下 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 样式。当我调整浏览器窗口大小时，您可以看到 chosen select 样式的 dropdownlist 的宽度不会根据容器调整大小。我在 windows.resize() 函数中添加了上面的脚本，但实际上并没有做任何事情。

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

Answer 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);
});

这似乎符合您的要求。