DropDownList实现可输入可选择(两种版本可选)


Posted in Javascript onDecember 07, 2016

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>

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

Javascript 相关文章推荐
javascript 表单的友好用户体现
Jan 07 Javascript
js 代码优化点滴记录
Feb 19 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
Jun 14 Javascript
JS打开新窗口的2种方式
Apr 18 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 Javascript
JS获取URL中的参数数据
Dec 05 Javascript
浅析JavaScript中的同名标识符优先级
Dec 06 Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
layui 弹出删除确认界面的实例
Sep 06 Javascript
JavaScript 异步时序问题
Nov 20 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 #Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
Dec 07 #Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 #Javascript
jquery实现文本框的禁用和启用
Dec 07 #Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 #Javascript
简单理解js的prototype属性及使用
Dec 07 #Javascript
Bootstrap基本组件学习笔记之列表组(11)
Dec 07 #Javascript
You might like
PHP生成静态页面详解
2006/11/19 PHP
PHP 可阅读随机字符串代码
2010/05/26 PHP
Symfony2在Nginx下的配置方法图文教程
2016/02/04 PHP
总结对比php中的多种序列化
2016/08/28 PHP
PHP中常见的密码处理方式和建议总结
2018/10/14 PHP
phpStorm2020 注册码
2020/09/17 PHP
javascript知识点收藏
2007/02/22 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
2010/09/12 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
微信小程序实现点击生成随机验证码
2020/09/09 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
python 判断一个进程是否存在
2009/04/09 Python
python中global用法实例分析
2015/04/30 Python
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
Python中is与==判断的区别
2017/03/28 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
python 制作网站小说下载器
2021/02/20 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
上海天奕面试题笔试题
2015/04/19 面试题
国庆节演讲稿
2014/05/27 职场文书
大学生标准自荐书
2014/06/15 职场文书
廉政教育的心得体会
2014/09/01 职场文书
学生上课说话检讨书
2014/10/25 职场文书
计算机实训报告总结
2014/11/05 职场文书
中学校园广播稿
2015/08/18 职场文书