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实现的所谓的滑动门
May 23 Javascript
javascript 动态修改样式和层叠样式表代码
Apr 27 Javascript
加速IE的Javascript document输出的方法
Dec 02 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
Dec 11 Javascript
用JS判断IE版本的代码 超管用!
Aug 09 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
window.open关于浏览器拦截问题分析及解决方法
Feb 05 Javascript
js/html光标定位的实现代码
Sep 23 Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
jQuery检查元素存在性(推荐)
Sep 17 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 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内存缓存Memcached类实例
2014/12/08 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
php 猴子摘桃的算法
2017/06/20 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
2013/03/29 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
JS基于VML技术实现的五角星礼花效果代码
2015/10/26 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
javascript基于原型链的继承及call和apply函数用法分析
2016/12/15 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
Python操作MongoDB数据库的方法示例
2018/01/04 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
Django 1.10以上版本 url 配置注意事项详解
2019/08/05 Python
Python 面向对象部分知识点小结
2020/03/09 Python
python3实现将json对象存入Redis以及数据的导入导出
2020/07/16 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
Pandora德国官网:购买潘多拉手链、戒指、项链和耳环
2020/02/20 全球购物
请说出这段代码执行后a和b的值分别是多少
2015/03/28 面试题
媒矿安全生产承诺书
2014/05/23 职场文书
社会发展项目建议书
2014/08/25 职场文书
小学生运动会报道稿
2014/09/12 职场文书
汽车车尾标语大全
2015/08/11 职场文书
浅谈mysql增加索引不生效的几种情况
2021/06/23 MySQL
Python基本数据类型之字符串str
2021/07/21 Python