手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >DropDownList实现可输入可选择(两种版本可选)
DropDownList实现可输入可选择(两种版本可选)
摘要:1、js版本SSM-001DDW-523QSD-009functiongetModelTo(e){document.getElementBy...

1、js版本

<div> <asp:DropDownList ID="ddlModel" runat="server" Width="105px" onchange="getModelTo(this)"> <asp:ListItem Value="1">SSM-001</asp:ListItem> <asp:ListItem Value="2">DDW-523</asp:ListItem> <asp:ListItem Value="3">QSD-009</asp:ListItem> </asp:DropDownList> </div> <asp:TextBox ID="txtModel" runat="server" Font-Size="9pt" Width="95px" Height="16px" MaxLength="50"></asp:TextBox> <script type="text/javascript"> function getModelTo(e) { document.getElementById("txtModel").value = e.options[e.selectedIndex].innerText; document.getElementById("txtModel").select(); } </script>

2、jquery版本

<div> <asp:DropDownList ID="ddlModel" runat="server" Width="105px" onchange="getModelTo(this)"> <asp:ListItem Value="1">SSM-001</asp:ListItem> <asp:ListItem Value="2">DDW-523</asp:ListItem> <asp:ListItem Value="3">QSD-009</asp:ListItem> </asp:DropDownList> </div> <asp:TextBox ID="txtModel" runat="server" Font-Size="9pt" Width="95px" Height="16px" MaxLength="50"></asp:TextBox> <script type="text/javascript"> function getModelTo(e) { $("#txtModel").val($("#ddlModel").find("option:selected").text()); $("#txtModel").select(); } </script>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,同时也希望多多支持查字典教程网!

【DropDownList实现可输入可选择(两种版本可选)】相关文章:

js输入中文效果

javascript实现带下拉子菜单的导航菜单效果

js实现顶部可折叠的菜单工具栏效果实例

jQuery插件实现适用于移动端的地址选择器

jQuery实现表格行上下移动和置顶效果

javascript实现获取服务器时间

javascript实现可拖动变色并关闭层窗口实例

javascript实现查找数组中最大值方法汇总

jQuery实现首页图片淡入淡出效果的方法

用JavaScript实现对话框的教程

精品推荐
分类导航