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 tab插件制作实现代码
Jun 22 Javascript
使用js正则控制input标签只允许输入的值
Jul 29 Javascript
JavaScript判断是否为数组的3种方法及效率比较
Apr 01 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
Jul 27 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
聊一聊JavaScript作用域和作用域链
May 03 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
js的OOP继承实现(必看篇)
Feb 18 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
Feb 12 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
Mar 10 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
Oct 30 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
海河写的 Discuz论坛帖子调用js的php代码
2007/08/23 PHP
深入php数据采集的详解
2013/06/02 PHP
PHP定时任务延缓执行的实现
2014/10/08 PHP
摘自启点的main.js
2008/04/20 Javascript
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
JavaScript 面向对象之命名空间
2010/05/04 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
2015/09/01 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
Python实现模拟登录及表单提交的方法
2015/07/25 Python
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
关于Python数据结构中字典的心得
2017/12/04 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
css3教程之倾斜页面
2014/01/27 HTML / CSS
使用css3和jquery实现可伸缩搜索框
2014/02/12 HTML / CSS
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
法学研究生自我鉴定范文
2013/12/04 职场文书
校园报刊亭的创业计划书
2014/01/02 职场文书
团队队名口号大全
2014/06/06 职场文书
社区好人好事材料
2014/12/26 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
员工升职自我评价
2019/03/26 职场文书
用Python提取PDF表格的方法
2021/04/11 Python