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 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
JAVASCRIPT对象及属性
Feb 13 Javascript
JavaScript如何从listbox里同时删除多个项目
Oct 12 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
深入理解Vue2.x的虚拟DOM diff原理
Sep 27 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
Jan 24 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 Javascript
jQuery实现高级检索功能
May 28 jQuery
小程序接入腾讯位置服务的详细流程
Mar 03 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运算符的知识大全
2011/11/03 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
PHP计算近1年的所有月份
2017/03/13 PHP
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
2015/03/20 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
2016/09/01 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
Vue render深入开发讲解
2018/04/13 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
Python Pandas分组聚合的实现方法
2019/07/02 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
2018/06/20 HTML / CSS
美国女孩服装购物网站:Justice
2017/03/04 全球购物
彪马美国官网:PUMA美国
2017/03/09 全球购物
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
学期自我鉴定范文
2013/10/01 职场文书
村委会主任先进事迹
2014/01/15 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
党员证明模板
2015/06/19 职场文书
搞笑婚庆主持词
2015/06/29 职场文书
生鲜超市—未来中国最具有潜力零售业态
2019/08/02 职场文书
Python上下文管理器Content Manager
2021/06/26 Python