如何在Windows上调整所选jQuery下拉列表的大小

SearchForKnowledge 发表于 Dev

SearchForKnowledge

我有以下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()函数中添加了上述脚本，但实际上并没有执行任何操作。

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

300波特

我将您的下拉列表包装在容器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);
});

这似乎按您的要求工作。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。