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 相关文章推荐
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 Javascript
统计出现最多的字符次数的js代码
Dec 03 Javascript
js采用map取到id集合组并且实现点击一行选中一行
Dec 16 Javascript
js的Boolean对象初始值示例
Mar 04 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
json前后端数据交互相关代码
Sep 19 Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 Javascript
JQuery属性操作与循环用法示例
May 15 jQuery
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 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计算两个整数的最大公约数常用算法小结
2015/03/05 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
laravel model 两表联查示例
2019/10/24 PHP
php + ajax 实现的写入数据库操作简单示例
2020/05/16 PHP
关于IE BUG与字符串截取substr的解决办法
2013/04/10 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
JS表单验证的代码(常用)
2016/04/08 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
详解js加减乘除精确计算
2019/03/19 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
js实现纯前端压缩图片
2020/11/16 Javascript
更改Python命令行交互提示符的方法
2015/01/14 Python
Python 实现一个颜色色值转换的小工具
2016/12/06 Python
python如何实现内容写在图片上
2018/03/23 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
django实现模板中的字符串文字和自动转义
2020/03/31 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
出纳岗位职责模板
2013/11/27 职场文书
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
单位在职证明范本
2014/01/09 职场文书
教师爱岗敬业演讲稿
2014/05/05 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
小学语文教师研修日志
2015/11/13 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
MySQL注入基础练习
2021/05/30 MySQL
python保存图片的四个常用方法
2022/02/28 Python