Select自动下拉实现
2012-11-01 16:29 focusdada 阅读(554) 评论(0) 编辑 收藏 举报比较简单的一种实现方式,通过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中。