如何調整所選的jQuery下拉列表上窗口調整

我有以下的asp.net的代碼，這使得使用選擇了jQuery的定製dropdownlist：如何調整所選的jQuery下拉列表上窗口調整

<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%; 
}

這裏輸出：

enter image description here

我故意離開提供下拉列表，而不chosen-select風格，創造了風格。當我調整瀏覽器窗口大小時，可以看到dropdownlist的寬度，chosen select樣式不會根據容器調整大小。我在windows.resize()函數中添加了上述腳本，但沒有真正做任何事情。

我將如何完成風格的下拉列表來調整根據容器的大小

來源

2014-10-17 SearchForKnowledge

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

這似乎工作正如你所要求的。

來源

2014-10-17 18:38:52

ddlSpecialtyContainer應該是100％寬度，我認爲？ – SearchForKnowledge 2014-10-17 18:53:03

如果這就是你想要的。 – 2014-10-17 19:42:56

如果您查看jQuery所選小部件的源代碼，您將看到一個名爲'set_up_html'的函數。此功能在所選小部件生成時調用，並根據您的下拉列表的當前大小將固定寬度應用於所選小部件。這隻會運行一次，所以您必須添加一個resize事件處理程序，以隨時改變所選小部件的寬度。 – 2014-10-17 19:48:58

如何調整所選的jQuery下拉列表上窗口調整

回答

相關問題