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表单验证使用插件formValidator
Nov 10 Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
js中键盘事件实例简析
Jan 10 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
如何在Linux上安装Node.js
Apr 01 Javascript
详解jQuery的表单验证插件--Validation
Dec 21 Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 Javascript
vue router+vuex实现首页登录验证判断逻辑
May 17 Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 Javascript
微信小程序开发实现消息推送
Nov 18 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
Jun 19 Javascript
JavaScript 闭包的使用场景
Sep 17 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
造势之举?韩国总统候选人发布《星际争霸》地图
2017/04/22 星际争霸
php Session存储到Redis的方法
2013/11/04 PHP
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
php实现的读取CSV文件函数示例
2017/02/07 PHP
PHP attributes()函数讲解
2019/02/03 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
图片自动更新(说明)
2006/10/02 Javascript
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
js实现开关灯效果
2020/03/30 Javascript
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
Python制作爬虫抓取美女图
2016/01/20 Python
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
python实现多线程抓取知乎用户
2016/12/12 Python
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
Python面向对象程序设计类的多态用法详解
2019/04/12 Python
python tkinter基本属性详解
2019/09/16 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
详解python变量与数据类型
2020/08/25 Python
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
Blancsom美国/加拿大:服装和生活用品供应商
2018/07/27 全球购物
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
房屋改造计划书
2014/01/10 职场文书
园林设计专业毕业生求职信
2014/03/23 职场文书
房屋出售授权委托书
2014/10/12 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python
如何优化vue打包文件过大
2022/04/13 Vue.js