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 相关文章推荐
jquery插件validate验证的小例子
May 08 Javascript
js禁止页面使用右键(简单示例代码)
Nov 13 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
VueJs路由跳转——vue-router的使用详解
Jan 10 Javascript
JavaScript提高加载和执行效率的方法
Feb 03 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
原生js实现简单的焦点图效果实例
Dec 14 Javascript
微信小程序使用二次贝塞尔曲线画波浪
Dec 25 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
如何阻止小程序遮罩层下方图层滚动
Sep 05 Javascript
JS继承实现方法及优缺点详解
Sep 02 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+MSSQL分页的例子
2006/10/09 PHP
PHP数组相关函数汇总
2015/03/24 PHP
详解PHP中的序列化、反序列化操作
2017/03/21 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
jquery json 实例代码
2010/12/02 Javascript
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
javascript自定义in_array()函数实现方法
2015/08/03 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
jquery实现弹窗功能(窗口居中显示)
2017/02/27 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
基于vue cli重构多页面脚手架过程详解
2018/01/23 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
Django实现的自定义访问日志模块示例
2017/06/23 Python
Python 异常处理的实例详解
2017/09/11 Python
从请求到响应过程中django都做了哪些处理
2018/08/01 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
2018/11/01 Python
Python闭包思想与用法浅析
2018/12/27 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
Python常用类型转换实现代码实例
2020/07/28 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
python爬虫请求头的使用
2020/12/01 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
Lookfantastic香港官网:英国知名美妆购物网站
2018/06/19 全球购物
毕业证委托书范文
2014/09/26 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书