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

jquery实现弹出层效果实例

用JavaScript实现对话框的教程

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

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

jquery实现图片左右切换的方法

JavaScript实现Flash炫光波动特效

javascript实现Table间隔色以及选择高亮的方法

JavaScript实现斗地主游戏的思路

CheckBox 如何实现全选?

基于JavaScript实现图片点击弹出窗口而不是保存

精品推荐
分类导航