如何调整所选的jQuery的DropDownList上调整窗口 [英] How to resize a chosen jquery dropdownlist on windows resize

问题描述

我有以下asp.net code，其利用了jQuery的选择来定制的DropDownList ：

I have the following asp.net code which makes use of the jQuery chosen to customize the 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%;
}

下面是输出：

我特意没有创造风格的选择选风格提供商的DropDownList。当我调整浏览器窗口中，可以看到的DropDownList 与选择选择风格的大小不会根据的宽度上的容器。我加了 windows.resize（）函数内部上面的脚本，但并没有真正做任何事情。

I intentionally left the provider dropdownlist without the chosen-select style which creates the style. When I resize the browser window, you can see the width of the dropdownlist with the chosen select style does not resize based on the container. I added the above script inside the windows.resize() function but didn't really do anything.

我将如何实现DropDownList的风格进行调整，根据容器的大小

How would I accomplish the styled dropdownlist to resize based on the size of the container

推荐答案

我包你的下拉列表容器DIV中：

I wrapped your Drop Down List inside a container DIV:

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

然后，我增加了一个窗口调整事件处理程序重新调整其下拉列表容器内的动态生成的jQuery选择控制。

Then I added a window resize event handler which resizes the dynamically generated jQuery chosen control inside the Drop Down List container.

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

这似乎你要求的工作。

这篇关于如何调整所选的jQuery的DropDownList上调整窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！