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 EasyUI API 中文文档 - ValidateBox验证框
Oct 06 Javascript
js获取浏览器的可视区域尺寸的实现代码
Nov 30 Javascript
详解JS函数重载
Dec 04 Javascript
jQuery实现360°全景拖动展示
Mar 18 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
May 11 Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
AngularJS中$http使用的简单介绍
Mar 17 Javascript
js实现京东秒杀倒计时功能
Jan 21 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
Jun 03 Javascript
15 分钟掌握vue-next响应式原理
Oct 13 Javascript
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 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写的基于Memcache的Queue实现代码
2011/11/27 PHP
PHP把空格、换行符、中文逗号等替换成英文逗号的正则表达式
2014/05/04 PHP
php中fsockopen用法实例
2015/01/05 PHP
php 反斜杠处理函数addslashes()和stripslashes()实例详解
2016/12/25 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
PHP实现15位身份证号转18位的方法分析
2019/10/16 PHP
不同浏览器的怪癖小结
2010/07/11 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
React进阶学习之组件的解耦之道
2017/08/07 Javascript
小程序tab页无法传递参数的方法
2018/08/03 Javascript
Vue实现底部侧边工具栏的实例代码
2018/09/03 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
2020/05/14 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
对python中的pop函数和append函数详解
2018/05/04 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
python字符串切割:str.split()与re.split()的对比分析
2019/07/16 Python
python打开使用的方法
2019/09/30 Python
Python更新所有已安装包的操作
2020/02/13 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
美国汽车交易网站:Edmunds
2016/08/17 全球购物
战友聚会邀请函
2014/01/18 职场文书
优秀实习生感言
2014/03/01 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
小学见习报告
2015/06/23 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
python基础之错误和异常处理
2021/10/24 Python
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android