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 textlimit 显示用户输入的字符数 限制用户输入的字符数
May 14 Javascript
js 小贴士一星期合集
Apr 07 Javascript
Javascript中的isNaN函数使用说明
Nov 10 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
Dec 27 Javascript
JavaScript获取对象在页面中位置坐标的方法
Feb 03 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 Javascript
浅谈Angular路由守卫
Aug 26 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
Jan 20 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
vue 扩展现有组件的操作
Aug 14 Javascript
JS新手入门数组处理的实用方法汇总
Apr 07 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+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
PHP文件操作实例总结
2016/09/27 PHP
php版阿里云OSS图片上传类详解
2016/12/01 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
vue.js指令v-model实现方法
2016/12/05 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
JS基于对象的链表实现与使用方法示例
2019/01/31 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
JQuery表单元素取值赋值方法总结
2020/05/12 jQuery
python代码 if not x: 和 if x is not None: 和 if not x is None:使用介绍
2016/09/21 Python
django Serializer序列化使用方法详解
2018/10/16 Python
python 创建一维的0向量实例
2019/12/02 Python
python 控制台单行刷新,多行刷新实例
2020/02/19 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
Old Navy加拿大官网:美式休闲服饰品牌
2017/09/26 全球购物
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
简历中个人自我评价范文
2013/12/26 职场文书
《骆驼和羊》教学反思
2014/02/27 职场文书
解放思想演讲稿
2014/09/11 职场文书
2014年外联部工作总结
2014/11/17 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
Java Socket实现Redis客户端的详细说明
2021/05/26 Redis
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL