DropDownList实现可输入可选择（两种版本可选）
更新时间：2016年12月07日 16:37:08 作者：冷战
本篇文章主要介绍了DropDownList实现可输入可选择的具体实现代码，并附上两种版本（js版本和jquery版本），可供大家选择。有需要的朋友可以参考下
1、js版本
<div style="z-index: 0; visibility: visible; clip: rect(0px 105px 80px 85px); position: absolute">
<asp:DropDownList ID="ddlModel" runat="server" Style="z-index: -1" 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" Style="z-index: 1px; position: absolute"
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 style="z-index: 0; visibility: visible; clip: rect(0px 105px 80px 85px); position: absolute">
<asp:DropDownList ID="ddlModel" runat="server" Style="z-index: -1" 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" Style="z-index: 1px; position: absolute"
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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，同时也希望多多支持脚本之家！
您可能感兴趣的文章:
相关文章
获取当前对象标签名称的方法有很多，本教程为大家介绍下使用jquery获取的具体实现2014-02-02
以下是对jQuery动态添加删除select项的实现代码进行了详细的分析介绍，需要的朋友可以过来参考下2013-09-09
下面小编就为大家带来一篇jQuery特殊符号转义的实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
如果一定要用最高版本的jQuery，最省事的办法莫过于在写xxx.focus()时，加一个try/catch，变成try{xxx.focus();}catch(e){}2014-01-01
jquery实现tab键进行选择后enter键触发click行为
本文主要介绍了jquery键盘事件实现tab键进行选择后enter键触发click行为的方法，这种使用场景为当首页有几个链接需要选择的时候，使用键盘就可以进行触发行为。下面跟着小编一起来看下吧2017-03-03
基于jquery实现的文章自定义分段显示，如果文章内容太多的话转换有点慢，大家若喜欢的话，可以参考下2014-05-05
这篇文章主要介绍了在JavaScript中重写jQuery对象的方法,在某些情况下jQuery无法满足应用开发的时候可以采用javascript重写jQuery方法来满足功能的实现,需要的朋友可以参考下2014-08-08
这篇文章主要介绍了jquery动态改变div宽度和高度,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了jQuery实现的模拟弹出窗口功能,结合实例形式分析了jQuery弹出窗口的初始化、坐标、背景设置等相关操作技巧,需要的朋友可以参考下2016-11-11
这篇文章主要介绍了Jquery选择器中使用变量实现动态选择例子,这样做的好处我们可以动态选择一些元素,核心思想其实就是用字符串组合,需要的朋友可以参考下2014-07-07
最新评论