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 相关文章推荐
在Windows上安装Node.js模块的方法
Sep 25 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
Dec 24 Javascript
Javascript连接多个数组不用concat来解决
Mar 24 Javascript
js加入收藏夹代码(兼容ie/ff/op)
May 16 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
Sep 02 Javascript
JavaScript 基本概念
Jan 20 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 Javascript
在vue项目中,使用axios跨域处理
Mar 07 Javascript
Vue实现随机验证码功能
Dec 29 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
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 a simple smtp class
2007/11/26 PHP
codeigniter数据库操作函数汇总
2014/06/12 PHP
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
javascript删除字符串最后一个字符
2014/01/14 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
angularJS提交表单(form)
2015/02/09 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
聊聊Vue中provide/inject的应用详解
2019/11/10 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
Python中的元类编程入门指引
2015/04/15 Python
Python写入数据到MP3文件中的方法
2015/07/10 Python
Python实现自动登录百度空间的方法
2017/06/10 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
Python Json数据文件操作原理解析
2020/05/09 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
python打包多类型文件的操作方法
2020/09/21 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
教师档案管理制度
2014/01/23 职场文书
租车协议书
2015/01/27 职场文书
Python基础之元编程知识总结
2021/05/23 Python
python异步的ASGI与Fast Api实现
2021/07/16 Python
Rust 连接 PostgreSQL 数据库的详细过程
2022/01/22 PostgreSQL
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技