How to Implement the DropDownList with detailed tables

This article describes in detail how to pop up the DataGrid when you click DropDownList, and then select the corresponding items from the DataGrid.
I have long found that there is a cool drop-down box on the Internet. Today I am also writing one here. This method aims to illustrate a solution to the problem. This method can be extended to custom controls, due to limited time, I only provide page implementation for this method. Of course, you can make use of your talents to make them more beautiful.
Problem description: we often encounter this problem when using DropDownList (at least I have encountered it), displaying a complicated content in a small area, we hope that you can have a clear understanding of what you want to select. You need to click the drop-down box to display the detailed information to the user, however, due to layout restrictions or restrictions on the drop-down box itself, it is difficult for us to do so.
Solution: we hope to have a layer to display a rich set of content. Since it is rich content, we should first think of the DataGrid Control, we use DataGrid, TextBox, And Button to implement this function.
Knowledge to understand: A little bit of JavaScript, a little bit of ASP. NET, and a little patience
The following code is used:
We need a layer to put our DataGrid. We call it divParent. The Code is as follows:
<Div id = "divParent" style = "OVERFLOW: auto; POSITION: absolute; HEIGHT: 300px;"> </div>
Next we need a TextBox and a Button. TextBox is a server control, and Button is a client Control Code as follows:
<Asp: TextBox id = "TextBox1" runat = "server"> </asp: TextBox>
<INPUT type = "button" value = "6" style = "FONT-FAMILY: marlett" onclick = "ShowDetail ('textbox1', 'grdcontent')">
We set the font of the Button to marlett so that "6" can be used to display a drop-down arrow. Of course, you can also use an image.
The code of the DataGrid is as follows: