您的位置:首页 > 其它

Select自动下拉实现

2012-11-01 16:29 316 查看
比较简单的一种实现方式,通过Size属性,加CSS控制。

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="DropdownExtender.ascx.cs" Inherits="WebAppDemo.DropdownExtender" %>
<div>
<asp:Label Text="麻醉医生" ID="lblAnesDoc" runat="server" Width="70px"></asp:Label>
<asp:TextBox ID="txtAnesDoc" runat="server" Width="120px"></asp:TextBox>
</div>
<div style=" position:absolute; z-index:100;">
<asp:DropDownList ID="ddlAnesDoc" runat="server" Width="120px" style="position:relative; top:0px; left:75px;">
<asp:ListItem Text="" Value=""></asp:ListItem>
<asp:ListItem Text="王生1" Value="王生1"></asp:ListItem>
<asp:ListItem Text="王生2" Value="王生2"></asp:ListItem>
<asp:ListItem Text="王生3" Value="王生3"></asp:ListItem>
<asp:ListItem Text="王生4" Value="王生4"></asp:ListItem>
</asp:DropDownList>
</div>
<script type="text/javascript">
var objddl = $('#<%=ddlAnesDoc.ClientID %>');
var objtxt = $('#<%=txtAnesDoc.ClientID %>');
$(function() {
try {
objddl.hide();
objtxt.dblclick(showDropdownList);
objddl.change(hideDropdownList);
}
catch (e) {
alert(e.message);
}
});

var showDropdownList = function() {
if (objddl[0].style.display == "") {
objddl.hide();
}
else {
objddl.show();
objddl[0].size = 10;
objddl.selectedIndex = 1;
}
}

var hideDropdownList = function() {
objtxt.val(objddl.val());
objddl.hide();
}
</script>


具体效果,双击显示Select,选择后显示在TextBox中。

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: