Select自动下拉实现

比较简单的一种实现方式，通过Size属性，加CSS控制。
 1 <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="DropdownExtender.ascx.cs" Inherits="WebAppDemo.DropdownExtender" %>
 2 <div>
 3 <asp:Label Text="麻醉医生" ID="lblAnesDoc" runat="server" Width="70px"></asp:Label>
 4 <asp:TextBox ID="txtAnesDoc" runat="server" Width="120px"></asp:TextBox>
 5 </div>
 6 <div style=" position:absolute; z-index:100;">    
 7 <asp:DropDownList ID="ddlAnesDoc" runat="server" Width="120px" style="position:relative; top:0px; left:75px;">
 8 <asp:ListItem Text="" Value=""></asp:ListItem>
 9 <asp:ListItem Text="王生1" Value="王生1"></asp:ListItem>
10 <asp:ListItem Text="王生2" Value="王生2"></asp:ListItem>
11 <asp:ListItem Text="王生3" Value="王生3"></asp:ListItem>
12 <asp:ListItem Text="王生4" Value="王生4"></asp:ListItem>
13 </asp:DropDownList>
14 </div>
15 <script type="text/javascript">
16     var objddl = $('#<%=ddlAnesDoc.ClientID %>');
17     var objtxt = $('#<%=txtAnesDoc.ClientID %>');
18     $(function() {
19         try {
20             objddl.hide();
21             objtxt.dblclick(showDropdownList);
22             objddl.change(hideDropdownList);
23         }
24         catch (e) {
25             alert(e.message);
26         }
27     });
28 
29     var showDropdownList = function() {
30         if (objddl[0].style.display == "") {
31             objddl.hide();
32         }
33         else {
34             objddl.show();
35             objddl[0].size = 10;
36             objddl.selectedIndex = 1;
37         }
38     }
39 
40     var hideDropdownList = function() {
41         objtxt.val(objddl.val());
42         objddl.hide();
43     }
44 </script>
具体效果，双击显示Select，选择后显示在TextBox中。