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 查找新建元素代码
Jul 06 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
May 06 Javascript
javascript事件冒泡和事件捕获详解
May 26 Javascript
Javascript BOM学习小结(六)
Nov 26 Javascript
JavaScript实现图片滑动切换的代码示例分享
Mar 06 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
vue-router 学习快速入门
Mar 01 Javascript
基于vue.js实现分页查询功能
Dec 29 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 Javascript
js实现点击生成随机div
Jan 16 Javascript
js里面的变量范围分享
Jul 18 Javascript
ajax jquery实现页面某一个div的刷新效果
Mar 04 jQuery
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
一个程序下载的管理程序(三)
2006/10/09 PHP
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
php的socket编程详解
2016/11/20 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
vue结合Echarts实现点击高亮效果的示例
2018/03/17 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python判断有效的数独算法示例
2019/02/23 Python
简单了解django缓存方式及配置
2019/07/19 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
python 字符串常用函数详解
2019/09/11 Python
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
农村结婚典礼司仪主持词
2014/03/14 职场文书
教师党员公开承诺书
2014/03/25 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
土地转让协议书
2014/09/27 职场文书
店铺转让协议书
2014/12/02 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
创业计划书之烤红薯
2019/09/26 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL
MyBatis 动态SQL全面详解
2021/10/05 MySQL
教你部署vue项目到docker
2022/04/05 Vue.js
Python函数对象与闭包函数
2022/04/13 Python