Asp.net self-made single-choice and multi-choice list implementation code

Q: Why is it "self-made "? Isn't there a ready-made control?
A: In ASP. on the net page, ListBox is finally rendered as a select element, while checklistbox is finally rendered as a div or table, which makes the styles of the two unable to be unified, or it is difficult to unify.
Solution:
Therefore, we decided to simply combine some elements to implement a uniform style of Single-choice lists and multiple-choice lists.
First, whether it is a single-choice list or multiple-choice list, a div with a border is used as a container:
<Div class = "list"> </div>
Then, add data items to the div. In order to be able to traverse data items in response to the onclick event and implement style control, I need to set the name attribute of each data item to the same, then use getelementsbyname to obtain the information (this method is frequently used in the full selection function of the check box ). However, after practice, it is found that DIV and span do not have the name attribute, and the anchor, that is, the <A> flag, can be used.
For example: CopyCode The Code is as follows: <Div id = "divdepartments" class = "list">
<A name = "Adep" style = "width: 100%" onclick = "itemclicked (this);"> department 1 </a>
<A name = "Adep" style = "width: 100%" onclick = "itemclicked (this);"> Department 2 </a>
<A name = "Adep" style = "width: 100%" onclick = "itemclicked (this);"> department 3 </a>
<A name = "Adep" style = "width: 100%" onclick = "itemclicked (this);"> Department 4 </a>
<A name = "Adep" style = "width: 100%" onclick = "itemclicked (this);"> Department 5 </a>
<A name = "Adep" style = "width: 100%" onclick = "itemclicked (this);"> Department 6 </a>
<A name = "Adep" style = "width: 100%" onclick = "itemclicked (this);"> Department 7 </a>
<A name = "Adep" style = "width: 100%" onclick = "itemclicked (this);"> Department 8 </a>
<A name = "Adep" style = "width: 100%" onclick = "itemclicked (this);"> Department 9 </a>
<A name = "Adep" style = "width: 100%" onclick = "itemclicked (this);"> Department 10 </a>
<A name = "Adep" style = "width: 100%" onclick = "itemclicked (this);"> Department 11 </a>
<A name = "Adep" style = "width: 100%" onclick = "itemclicked (this);"> department 12 </a>
</Div>

The list style is as follows:Copy codeThe Code is as follows:. List
{
Overflow-Y: Scroll;
Width: 120px;
Height: 150px;
Padding: 3px;
Border: solid 1px # afafaf;
Background-color: # ffffff;
Cursor: pointer;
}

the itemclicked function is used to respond to the click event. The following code only changes the style and adds the content for loading data: copy Code the code is as follows: function itemclicked (a) {
. style. backgroundcolor = "# eeeeee";
As = document. getelementsbyname (. name);
for (I = 0; I <. length; I ++) {
if (as [I]! = A) {as [I]. style. backgroundcolor = "# ffffff" ;}< BR >}

The multiple-choice list with check boxes is similar, but when traversing data items, you only need to traverse the check boxes, so you can use Div as the container for data items:Copy codeThe Code is as follows: <Div id = "divpersons" class = "list">
<Div> <input type = "checkbox"/> personnel 1 </div>
<Div> <input type = "checkbox"/> personnel 2 </div>
<Div> <input type = "checkbox"/> personnel 3 </div>
<Div> <input type = "checkbox"/> personnel 4 </div>
<Div> <input type = "checkbox"/> personnel 5 </div>
<Div> <input type = "checkbox"/> personnel 6 </div>
<Div> <input type = "checkbox"/> personnel 7 </div>
<Div> <input type = "checkbox"/> personnel 8 </div>
<Div> <input type = "checkbox"/> personnel 9 </div>
<Div> <input type = "checkbox"/> Personnel 10 </div>
<Div> <input type = "checkbox"/> personnel 11 </div>
</Div>

Finally, for data loading, I plan to use Ajax. Updater to fill the data items in the DIV of the corresponding list.