手机
当前位置:查字典教程网 >编程开发 >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实现可输入可选择(两种版本可选)】相关文章:

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

用JavaScript实现对话框的教程

JavaScript实现Flash炫光波动特效

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

javascript实现可全选、反选及删除表格的方法

javascript实现链接单选效果

CheckBox 如何实现全选?

JavaScript实现列表分页功能特效

JavaScript实现单击下拉框选择直接跳转页面的方法

javascript实现获取服务器时间

精品推荐
分类导航