js下拉选择框与输入框联动实现添加选中值到输入框的方法


Posted in Javascript onAugust 17, 2015

本文实例讲述了js下拉选择框与输入框联动实现添加选中值到输入框的方法。分享给大家供大家参考。具体如下:

这里演示js下拉选择框与输入框联动,直接添加选中值到输入框中的效果。这种效果相信不少朋友见到过吧,省去用户输入的麻烦,这里使用JS直接将值赋予输入框,了解原理之后,可灵活运用,扩展出更多的特效来。

运行截图如下:

js下拉选择框与输入框联动实现添加选中值到输入框的方法

在线演示地址如下:

具体代码如下:

<html>
<head>
<title>下拉选择框与输入框联动,直接添加选中值到输入框</title>
</head>
<body>
<select id="uiSel">
  <option value="-1">请选择</option>
  <option value="until1">unti1</option>
  <option value="until2">unti2</option>
  <option value="until3">unti3</option>
  <option value="until4">unti4</option>
  <option value="until5">unti5</option>
</select>
<input type="text" name="" id="show" />
</body>
<script type="text/javascript">
document.getElementById('uiSel').onchange=function (){
  if(this.options[0].value==-1)this.options[0]=null;
  document.getElementById('show').value=this.value
};
</script>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript读取RSS数据
Jan 20 Javascript
javascript 操作Word和Excel的实现代码
Oct 26 Javascript
基于JQuery 的消息提示框效果代码
Jul 31 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 Javascript
php简单数据库操作类的封装
Jun 08 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 Javascript
js canvas实现5张图片合成一张图片
Jul 15 Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 #Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 #Javascript
jquery实现动静态条形统计图
Aug 17 #Javascript
JS实现的5级联动Select下拉选择框实例
Aug 17 #Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 #Javascript
js简单实现Select互换数据的方法
Aug 17 #Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 #Javascript
You might like
php截取中文字符串不乱码的方法
2013/12/25 PHP
PHP基于imap获取邮件实例
2014/11/11 PHP
php中请求url的五种方法总结
2017/07/13 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
Javascript之文件操作
2007/03/07 Javascript
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
客户端限制只能上传jpg格式图片的js代码
2010/12/09 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
js实现索引图片切换效果
2015/11/21 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
2016/02/06 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
[01:19:23]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第二场
2018/04/06 DOTA
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
Python中不同进制的语法及转换方法分析
2016/07/27 Python
Python如何实现MySQL实例初始化详解
2017/11/06 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
Python实现把类当做字典来访问
2019/12/16 Python
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
函数只定义了一次, 调用了一次, 但编译器提示非法重定义了-什么问题?
2014/10/03 面试题
新媒传信软件测试面试题
2013/02/24 面试题
大学毕业生的自我鉴定
2013/11/30 职场文书
MySQL 自定义变量的概念及特点
2021/05/13 MySQL
python之django路由和视图案例教程
2021/07/26 Python
Android Studio实现带三角函数对数运算功能的高级计算器
2022/05/20 Java/Android
详解Spring Bean的配置方式与实例化
2022/06/10 Java/Android