js实现将选中值累加到文本框的方法


Posted in Javascript onAugust 12, 2015

本文实例讲述了js实现将选中值累加到文本框的方法。分享给大家供大家参考。具体如下:

这里实现JavaScript将列表框或单选框选中的值累计加入到文本框中,在一些表单中,我们经常会看到这种功能,可以免去用户输入的麻烦,提升用户体验。变通一下,你还可以做出更多的类似功能来。

运行效果截图如下:

js实现将选中值累加到文本框的方法

具体代码如下:

<html>
<head>
<title>js将选中值添加到文本框</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
oldvalue = "";
function passText(passedvalue) {
 if (passedvalue != "") {
  var totalvalue = passedvalue+"\n"+oldvalue;
  document.displayform.itemsbox.value = totalvalue;
  oldvalue = document.displayform.itemsbox.value;
 }
}
// End -->
</script>
</head>
<body>
<form name="selectform">
<select name="dropdownbox" size=1>
<option value="">请选择</option>
<option value="ASP">ASP</option>
<option value="PHP">PHP</option>
<option value="JAVA">JAVA</option>
<option value="ASP.NET">ASP.NET</option>
<option value="DELPHI">DELPHI</option>
</select>
<input type=button value="添加到列表中" onClick="passText(this.form.dropdownbox.options[this.form.dropdownbox.selectedIndex].value);">
</form>
<form name="displayform" >
<textarea cols="30" rows="5" name="itemsbox" ></textarea>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
js静态作用域的功能。
Dec 25 Javascript
JS宝典学习笔记(下)
Jan 10 Javascript
百度地图api应用标注地理位置信息(js版)
Feb 01 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
setInterval计时器不准的问题解决方法
May 08 Javascript
JS简单循环遍历json数组的方法
Apr 22 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
Sep 20 Javascript
jQuery 常见小例汇总
Dec 14 Javascript
NestJs 静态目录配置详解
Mar 12 Javascript
微信小程序rich-text富文本用法实例分析
May 20 Javascript
简单了解JavaScript中常见的反模式
Jun 21 Javascript
JavaScript实现前端倒计时效果
Feb 09 Javascript
javascript实现简单的分页特效
Aug 12 #Javascript
JavaScript实现网站访问次数统计代码
Aug 12 #Javascript
jquery+ajax请求且带返回值的代码
Aug 12 #Javascript
javascript封装简单实现方法
Aug 11 #Javascript
基于Css3和JQuery实现打字机效果
Aug 11 #Javascript
js实现获取当前时间是本月第几周的方法
Aug 11 #Javascript
js判断子窗体是否关闭的方法
Aug 11 #Javascript
You might like
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
node+express+jade制作简单网站指南
2014/11/26 Javascript
JavaScript学习心得之概述
2015/01/20 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
jquery实现仿新浪微博评论滚动效果
2015/08/06 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
js 获取站点应用名的简单实例
2016/08/18 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
在Python中使用HTML模版的教程
2015/04/29 Python
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
python 格式化输出百分号的方法
2019/01/20 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
python基于event实现线程间通信控制
2020/01/13 Python
浅谈html5 响应式布局
2014/12/24 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
2018/03/13 HTML / CSS
请介绍一下Ant
2016/07/22 面试题
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
博士学位自我鉴定范文
2013/12/26 职场文书
宿舍使用违章电器检讨书
2014/01/12 职场文书
法律顾问服务方案
2014/05/15 职场文书
明确岗位职责
2015/02/14 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle