动态调整下拉列表大小，并为列表项的背景和前景添加颜色

引言

我们遇到下拉列表中文本超出下拉列表大小的情况。许多开发人员在这种情况下会尝试换行文本，这可能有帮助，但我认为它不是一个很好的用户界面 (UI)。通常情况下，如果我们增加下拉列表的大小，页面会出现水平滚动条。截断的文本会给用户带来问题，因为他/她可能无法看到下拉列表中的全部内容，当他们选择仅在最后几个位/字符上有所不同的值时，这会给他们带来问题。文档的后半部分描述了为下拉列表项添加字体颜色和背景颜色。通常，在 ASP.Net 中，当我们需要在下拉列表项的背景中添加颜色时会遇到问题，因此许多开发人员更喜欢 HTML 控件，因为使用 HTML 控件添加背景颜色相对简单。我们尝试使用 JavaScript 为下拉列表添加字体颜色和背景颜色。

使用代码

动态调整下拉列表的宽度

我们首先像往常一样将下拉列表添加到表格/数据网格中，然后添加调整宽度的逻辑。我们使用“oncontextmenu”事件，当用户右键单击控件时会触发此事件。捕获右键单击事件后，我们调用一个 Javascript 函数来增加下拉列表的宽度。如果初始宽度较小，则我们将其增加到最大宽度——即显示所有项目所需的宽度。如果当前宽度是最大宽度，则右键单击时我们需要再次调整控件大小，以便页面看起来像往常一样。

<TABLE id="Table1" style="LEFT: 144px; POSITION: absolute; TOP: 48px;"

cellSpacing="1" cellPadding="1" width="208" border="1">

 <TR>

  <TD style="WIDTH: 138px"><asp:Label id="lblColour1" runat="server" BorderStyle="None">Colour Name:</asp:Label></TD>

  <TD><asp:DropDownList Width="40" id="cmbColour1" runat="server" oncontextmenu="fnJumpSize (this);"></asp:DropDownList></TD>

 </TR>

 <TR>

  <TD style="WIDTH: 138px"><asp:Label id="lblColour2" 
runat="server" BorderStyle="None">Colour Name:</asp:Label></TD>

  <TD><asp:DropDownList Width="40" id="cmbColour2" 
runat="server" oncontextmenu="fnJumpSize(this);"></asp:DropDownList></TD>

 </TR>

 <TR>

  <TD style="WIDTH: 138px"><asp:Label id="lblColour3" 
runat="server" BorderStyle="None">Colour Name:</asp:Label></TD>

  <TD><asp:DropDownList Width="40" id="cmbColour3" 
runat="server" oncontextmenu="fnJumpSize(this);"></asp:DropDownList></TD>

 </TR>

</TABLE>

现在我们来看看用于在右键单击下拉列表时调整下拉列表宽度的 Javascript 事件。

function fnJumpSize(cmbDrop)
{	
		
	if(cmbDrop.style.width != "100px")
	{
		cmbDrop.style.width = "100";
	}
	else
	{
		cmbDrop.style.width = "40";
	}
			
}

右键单击下拉列表框时

再次右键单击下拉列表框时

重要提示：需要注意项目的宽度

此部分对开发人员非常重要。我建议在创建网页时，以下拉列表的宽度，以避免任何水平滚动条，并且设计应适合屏幕。然后检查下拉列表项的最大宽度，并将该值输入到 javascript 函数 fnJumpSize 中。如果您希望在整个应用程序中实现此功能，只需将其替换为任何常量，并从前端填充该常量/隐藏变量的值。

使用 JavaScript 添加背景和前景颜色

我们在页面加载时调用一个 Javascript 函数，该函数为列表项添加颜色。此函数从字符串格式中获取背景颜色，并将它们添加到各个项目。如果您有多个配色方案，我建议您在前端本身填充它。

function fnColourIt()
{	
			
	var strColors = "pink$aqua$aquamarine$azure$beige$bisque$black$blanchedalmond$
blue$burlywood$cadetblue$chartreuse$chocolate$coral$cornflowerblue$
cornsilk$peachpuff$cyan$darkblue";

	var arrColors = strColors.split("$");
	var startOne = 1;
			
	while(startOne < 4)
	{
					
		var drpOne = document.getElementById("cmbColour" + startOne);
		var i;
					
		for (i = 0; i < arrColors.length; i++)
		{
			htmlCode = document.createElement('option');
			htmlCode.text = arrColors[i];
			htmlCode.value = arrColors[i];
			drpOne.options.add(htmlCode); 
			drpOne.options[i].style.background = drpOne.options[i].value;
			//drpOne.options[i].style.color = "white";
		}
		startOne = parseInt(startOne) + 1;
	}

}

for 循环中的前三行创建了一个列表项，并分别为其分配了文本和值。第四行运行命令将列表项添加到下拉列表中。以下行添加列表项的背景颜色

drpOne.options[i].style.background = drpOne.options[i].value;

drpOne.options[i].style.color = "white";

结论

1) 用户可以动态增加任何下拉列表的大小/宽度
2) ASP.Net 中下拉列表的背景着色耗时且困难，但在 Javascript 中以相当简单的方式处理
3) 易于实现
4) 可扩展，即通过对 JS 函数进行少量更改，您可以在整个应用程序中对其进行扩展