问：为什么要“自制”？不是有现成的控件吗？

答：在ASP.NET的页面上，ListBox最终是渲染成select元素，而CheckListBox最终被渲染成div或者是table，使得二者的样式无法统一，或者说要统一很麻烦。

解决：

于是，决定干脆自行组合一些元素，实现单选列表、多选列表的统一样式。

首先，无论是单选列表还是多选列表，都用一个有边框的div来做容器：

<div></div>

然后，在这个div中添加数据项。为了在响应onclick事件时，能够遍历数据项，进而做一些样式上的控制，我需要把各个数据项的name属性设为一样的，然后用getElementsByName获取（这种办法我在复选框的全选功能上常用）。然而，经过实践，发现div、span均无name属性，最终找到用锚点，也就是<a>标记，可以实现。

例如：

复制代码 代码如下:

<div id="divDepartments">

<a name="aDep">部门1</a>

<a name="aDep">部门2</a>

<a name="aDep">部门3</a>

<a name="aDep">部门4</a>

<a name="aDep">部门5</a>

<a name="aDep">部门6</a>

<a name="aDep">部门7</a>

<a name="aDep">部门8</a>

<a name="aDep">部门9</a>

<a name="aDep">部门10</a>

<a name="aDep">部门11</a>

<a name="aDep">部门12</a>

</div>

其中，list样式：

复制代码 代码如下:

.list

{

overflow-y:scroll;

width:120px;

height:150px;

padding:3px;

border:solid 1px #AFAFAF;

background-color: #ffffff;

cursor: pointer;

}

ItemClicked函数用来响应click事件。下面的代码只是做一些样式上的变化，还可继续添加加载数据的内容：

复制代码 代码如下:

function ItemClicked(a){

a.style.backgroundColor="#EEEEEE";

as=document.getElementsByName(a.name);

for(i=0;i<as.length;i++){

if(as[i]!=a){as[i].style.backgroundColor="#FFFFFF";}

}

}

带有复选框的多选列表也大同小异，只是这里由于遍历数据项时，只要对复选框遍历即可，故可以使用div做数据项的容器了：

复制代码 代码如下:

<div id="divPersons">

<div><input type="checkbox" />人员1</div>

<div><input type="checkbox" />人员2</div>

<div><input type="checkbox" />人员3</div>

<div><input type="checkbox" />人员4</div>

<div><input type="checkbox" />人员5</div>

<div><input type="checkbox" />人员6</div>

<div><input type="checkbox" />人员7</div>

<div><input type="checkbox" />人员8</div>

<div><input type="checkbox" />人员9</div>

<div><input type="checkbox" />人员10</div>

<div><input type="checkbox" />人员11</div>

</div>

最后，关于数据的加载问题，在当前的具体问题中，我打算用Ajax.Updater，来实现对相应列表的div中数据项的填充。