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 相关文章推荐
Js+Flash实现访问剪切板操作
Nov 20 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
Apr 11 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 Javascript
jQuery简单创建节点的方法
Sep 09 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
vue-lazyload图片延迟加载插件的实例讲解
Feb 09 Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 Javascript
Vue中props的使用详解
Jun 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实现var_export的详细介绍
2013/06/20 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
php实现简单加入购物车功能
2017/03/07 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
jQuery版Tab标签切换
2011/03/16 Javascript
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
深入分析js中的constructor和prototype
2012/04/07 Javascript
随鼠标上下滚动的jquery代码
2013/12/05 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
react开发中如何使用require.ensure加载es6风格的组件
2017/05/09 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
Vue源码学习之关于对Array的数据侦听实现
2019/04/23 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
分享15个最受欢迎的Python开源框架
2014/07/13 Python
Python利用ansible分发处理任务
2015/08/04 Python
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
什么是Smart Navigation?
2016/07/03 面试题
数字天堂软件测试面试题
2012/12/23 面试题
EJB3推出JPA的原因
2013/10/16 面试题
竞选班委演讲稿
2014/04/28 职场文书
大学生精神文明先进个人事迹材料
2014/05/02 职场文书