ASP.NET 中的多选下拉框

rperetz

3.33/5 (9投票s)

2010年1月28日

CPOL

1分钟阅读

155120

7560

在 ASP.NET 中实现多选值的一种简单方法。

下载源代码 - 3.61 KB

引言

在本文中，我将向您展示在 ASP.NET 页面中实现多选的一种不同方法。我会尽量使这篇文章简短明了，以便您可以在应用程序中使用这段代码。

使用代码

我们将把 CheckBoxList ASP.NET 控件放在 HTML div 对象内。我还添加了代码来支持更改所选行的背景颜色。

<%@ Page Language="C#" AutoEventWireup="true" 
  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
.scroll_checkboxes
{
    height: 120px;
    width: 200px;
    padding: 5px;
    overflow: auto;
    border: 1px solid #ccc;
}

.FormText
{
    FONT-SIZE: 11px;
    FONT-FAMILY: tahoma,sans-serif
}
</style>

<script language="javascript">

var color = 'White'; 

function changeColor(obj) 
{ 
    var rowObject = getParentRow(obj); 
    var parentTable = 
      document.getElementById("<%=chkList.ClientID%>"); 

    if(color == '') 
    {
        color = getRowColor(); 
    } 

    if(obj.checked) 
    {
        rowObject.style.backgroundColor = '#A3B1D8'; 
    }
    else 
    {
        rowObject.style.backgroundColor = color; 
        color = 'White'; 
    }

    // private method
    function getRowColor() 
    {
        if(rowObject.style.backgroundColor == 'White')
            return parentTable.style.backgroundColor; 
        else return rowObject.style.backgroundColor; 
    }
}

// This method returns the parent row of the object
function getParentRow(obj) 
{ 
    do 
    {
        obj = obj.parentElement; 
    }
    while(obj.tagName != "TR") 
    return obj; 
}

function TurnCheckBoixGridView(id)
{
    var frm = document.forms[0];

    for (i=0;i<frm.elements.length;i++)
    {
        if (frm.elements[i].type == "checkbox" && 
            frm.elements[i].id.indexOf("<%= chkList.ClientID %>") == 0)
        {
            frm.elements[i].checked = 
              document.getElementById(id).checked;
        }
    }
}

function SelectAll(id)
{
    var parentTable = document.getElementById("<%=chkList.ClientID%>"); 
    var color

    if (document.getElementById(id).checked)
    {
        color = '#A3B1D8'
    }
    else
    {
        color = 'White'
    }

    for (i=0;i<parentTable.rows.length;i++)
    {
        parentTable.rows[i].style.backgroundColor = color;
    }
    TurnCheckBoixGridView(id);
}

</script>
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="scroll_checkboxes">
<asp:CheckBoxList Width="180px" ID="chkList" 
  runat="server" CssClass="FormText" 
  RepeatDirection="Vertical" RepeatColumns="1" 
  BorderWidth="0" Datafield="description" 
  DataValueField="value">
<asp:ListItem id="text1" Value="Select me 1" 
   onclick="changeColor(this);"></asp:ListItem>
<asp:ListItem id="text2" Value="Select me 2" 
   onclick="changeColor(this);"></asp:ListItem>
<asp:ListItem id="text3" Value="Select me 3" 
   onclick="changeColor(this);"></asp:ListItem>
<asp:ListItem id="text4" Value="Select me 4" 
   onclick="changeColor(this);"></asp:ListItem>
<asp:ListItem id="text5" Value="Select me 5" 
   onclick="changeColor(this);"></asp:ListItem>
<asp:ListItem id="text6" Value="Select me 6" 
   onclick="changeColor(this);"></asp:ListItem>
<asp:ListItem id="text7" Value="Select me 7" 
   onclick="changeColor(this);"></asp:ListItem>
<asp:ListItem id="text8" Value="Select me 8" 
   onclick="changeColor(this);"></asp:ListItem>
<asp:ListItem id="text9" Value="Select me 9" 
   onclick="changeColor(this);"></asp:ListItem>
<asp:ListItem id="text10" Value="Select me 10" 
   onclick="changeColor(this);"></asp:ListItem>
<asp:ListItem id="text11" Value="Select me 11" 
   onclick="changeColor(this);"></asp:ListItem>
<asp:ListItem id="text12" Value="Select me 12" 
   onclick="changeColor(this);"></asp:ListItem>
<asp:ListItem id="text13" Value="Select me 13" 
   onclick="changeColor(this);"></asp:ListItem>
</asp:CheckBoxList>
</div>
</div>
</form>
</body>
</html>

如果需要从数据库加载此列表，则可以轻松地将 CheckBoxList 绑定到 DataSource 对象。

要添加 JavaScript 调用以更改颜色，只需在每个 ListItem 控件的代码隐藏文件中使用 text1.Attributes.Add("onclick", "changeColor(this)"); (您需要使用循环)。

使用相同的 Javascript 代码突出显示 GridView 中的行

您可以对 GridView 中的行突出显示使用相同的 JavaScript；例如，假设您有一个带有 ItemTemplate 的 GridView，其中包含一个 CheckBox。

将 onclick="changeColor(this)" 添加到复选框即可实现。

<ItemTemplate >
  <asp:CheckBox ID="chkSelect" runat="server" 
     Width = "24px" Visible = "true" 
     onclick="changeColor(this)" EnableViewState="True" />
  <asp:Label ID="HiddenShipmentID" runat="server" 
     visible = "false" 
     Text = '<%# Eval("shipment_id") %>'></asp:Label>
</ItemTemplate>.....

您所需要做的就是更改 JavaScript 以使用 GridView 的名称

var parentTable = document.getElementById("<%=chkList.ClientID%>");

更改为

var parentTable = document.getElementById("<%=GridViewName.ClientID%>");

就这样了。

希望您喜欢这个小技巧。如果您喜欢这个想法，请随时投票。