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 相关文章推荐
js中几种去掉字串左右空格的方法
Dec 25 Javascript
htm调用JS代码
Mar 15 Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
js 奇葩技巧之隐藏代码
Aug 11 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
微信小程序实现登录注册tab切换效果
Dec 29 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
Sep 05 Javascript
vue中使用GraphQL的实例代码
Nov 04 Javascript
解决Vue大括号字符换行踩的坑
Nov 09 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 jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
php获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
点图片上一页下一页翻页效果
2008/07/09 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
2016/11/30 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
2019/01/29 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
初步剖析C语言编程中的结构体
2016/01/16 Python
python中logging库的使用总结
2017/10/18 Python
Python自动化之数据驱动让你的脚本简洁10倍【推荐】
2019/06/04 Python
pandas 中对特征进行硬编码和onehot编码的实现
2019/12/20 Python
Pytorch的mean和std调查实例
2020/01/02 Python
Python post请求实现代码实例
2020/02/28 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
Chicco婴儿用品美国官网:汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
关于保护环境的建议书
2014/05/13 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
爱心捐款感谢信
2015/01/20 职场文书
工作收入证明模板
2015/06/12 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers