问:为什么要“自制”?不是有现成的控件吗? 
答:在ASP.NET的页面上,ListBox最终是渲染成select元素,而CheckListBox最终被渲染成div或者是table,使得二者的样式无法统一,或者说要统一很麻烦。 
解决: 
于是,决定干脆自行组合一些元素,实现单选列表、多选列表的统一样式。 
首先,无论是单选列表还是多选列表,都用一个有边框的div来做容器: 
<div></div> 
然后,在这个div中添加数据项。为了在响应onclick事件时,能够遍历数据项,进而做一些样式上的控制,我需要把各个数据项的name属性设为一样的,然后用getElementsByName获取(这种办法我在复选框的全选功能上常用)。然而,经过实践,发现div、span均无name属性,最终找到用锚点,也就是<a>标记,可以实现。 
例如: 
复制代码 代码如下:
 
<div> 
<a>部门1</a> 
<a>部门2</a> 
<a>部门3</a> 
<a>部门4</a> 
<a>部门5</a> 
<a>部门6</a> 
<a>部门7</a> 
<a>部门8</a> 
<a>部门9</a> 
<a>部门10</a> 
<a>部门11</a> 
<a>部门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> 
<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中数据项的填充。