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多线程的实现方法
May 08 Javascript
不错的JS中变量相关的细节分析
Aug 13 Javascript
js 获取服务器控件值的代码
Mar 05 Javascript
javascript完美拖拽的实现方法
Sep 29 Javascript
JavaScript中的this关键字使用方法总结
Mar 13 Javascript
javascript实现table表格隔行变色的方法
May 13 Javascript
JavaScript运算符小结
Jun 03 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 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
cache_lite试用
2007/02/14 PHP
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
php cookis创建实现代码
2009/03/16 PHP
php ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
类似CSDN图片切换效果脚本
2009/09/17 Javascript
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
Jquery带搜索框的下拉菜单
2013/05/06 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
2014/02/28 Javascript
js实现div闪烁原理及实现代码
2014/06/24 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
js操作二进制数据方法
2018/03/03 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
ASOS英国官网:英国在线时装和化妆品零售商
2017/05/19 全球购物
优秀经理事迹材料
2014/02/01 职场文书
工程师岗位职责规定
2014/02/26 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
课外小组活动总结
2014/08/27 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
2019单位介绍信怎么写
2019/06/24 职场文书