Select自动下拉实现
2012-11-01 16:29
316 查看
比较简单的一种实现方式,通过Size属性,加CSS控制。
具体效果,双击显示Select,选择后显示在TextBox中。
<%@ 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中。
相关文章推荐
- [置顶] 仿Select下拉框自动提示(easyui combobox插件实现)
- 基于jQuery实现select下拉选择可输入附源码下载
- 用javascript实现下拉列表的自动筛选功能
- JavaScript解析Json实现动态修改多级下拉选择列表控件Select
- 文本框+层模拟下拉框,并实现输入自动提示和过滤
- 如何用js实现select下拉框里是树形结构,可复选,select框中传复选所有值?select2tree
- Select2插件的用法,通过ajax实现在下拉框中回显
- 实现html中select下拉列表中部分选项不可选
- select 自动选择 检查下拉列表
- iosSelect插件 H5中实现iOS的select下拉联动效果
- 通过动态面板实现列表下拉自动刷新
- html select下拉框上显示空的实现方法
- jQuery实现select下拉框获取当前选中文本、值、索引
- 基于jquery的用dl模拟实现可自定义样式的SELECT下拉列表(已封装)
- jQuery 实现带下拉提示且自动填充的邮箱
- js实现下拉框效果(select)
- select下拉框 option 自动提示
- 文本框+层模拟下拉框,并实现输入自动提示和过滤
- Select下拉列表选择自动提交form表单数据
- 使用JQUERY的flexselect插件来实现将SELECT下拉菜单变成自动补全输入框