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 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
js 键盘记录实现(兼容FireFox和IE)
Feb 07 Javascript
基于javascipt-dom编程 table对象的使用
Apr 22 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
Jun 09 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 Javascript
element-ui 关于获取select 的label值方法
Aug 24 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 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读取PDF内容配合Xpdf的使用
2012/11/24 PHP
php ios推送(代码)
2013/07/01 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
JS控制表格隔行变色
2006/06/26 Javascript
JavaScript面向对象编程
2008/03/02 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
jquery 追加tr和删除tr示例代码
2013/09/12 Javascript
jQuery unbind()方法实例详解
2016/01/19 Javascript
一道关于JavaScript变量作用域的面试题
2016/03/08 Javascript
AngularJs表单验证实例详解
2016/05/30 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
JS中的模糊查询功能
2019/12/08 Javascript
Python入门学习之字符串与比较运算符
2015/10/12 Python
Python脚本实现Web漏洞扫描工具
2016/10/25 Python
python 中的int()函数怎么用
2017/10/17 Python
python实现生命游戏的示例代码(Game of Life)
2018/01/24 Python
Python实现识别手写数字大纲
2018/01/29 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
Python实现分段线性插值
2018/12/17 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
学前班幼儿评语大全
2014/12/29 职场文书
教代会开幕词
2015/01/28 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
企业宣传语大全
2015/07/13 职场文书
MySQL 表空间碎片的概念及相关问题解决
2021/05/07 MySQL
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis