DropDownList实现可输入可选择（两种版本可选）

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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

• 在dropDownList中实现既能输入一个新值又能实现下拉选的代码
• DropDownList 下拉框选择改变促发事件和防全局刷新(推荐)
• DropDownList绑定选择数据报错提示异常解决方案
• 用javascript为DropDownList控件下拉式选择添加一个Item至定义索引位置
• asp.net中不能在DropDownList中选择多个项 原因分析及解决方法
• ASP.NET中DropDownList下拉框列表控件绑定数据的4种方法
• C#使用DropDownList绑定添加新数据的方法汇总
• asp.net DropDownList实现二级联动效果
• DropDownList添加客户端下拉事件操作