我有以下 asp.net 代码,它使用选择的 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>
我使用以下脚本来初始化下拉列表
:
<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()
函数中添加了上述脚本,但没有真正执行任何操作。
我如何完成样式化的下拉列表以根据容器的大小调整大小
最佳答案
我将您的下拉列表包装在容器 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);
});
这似乎按照您的要求工作。
关于jquery - 如何在 Windows 上调整所选 jquery 下拉列表的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26425643/