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 相关文章推荐
javaScript的函数对象的声明详解
Feb 06 Javascript
详解JavaScript中的every()方法
Jun 08 Javascript
使用Node.js实现HTTP 206内容分片的教程
Jun 23 Javascript
Angular2安装angular-cli
May 21 Javascript
JavaScript之生成器_动力节点Java学院整理
Jun 30 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
基于javascript中的typeof和类型判断(详解)
Oct 27 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 Javascript
js实现AI五子棋人机大战
May 28 Javascript
用JS写一个发布订阅模式
Nov 07 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
1 Tube Radio
2021/03/02 无线电
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
在layui框架中select下拉框监听更改事件的例子
2019/09/20 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
Javascript操作select控件代码实例
2020/02/14 Javascript
python中requests库session对象的妙用详解
2017/10/30 Python
django实现同一个ip十分钟内只能注册一次的实例
2017/11/03 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
在python里面运用多继承方法详解
2019/07/01 Python
pytorch numpy list类型之间的相互转换实例
2019/08/18 Python
python如何对链表操作
2020/10/10 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
农业资源与环境专业自荐信范文
2013/12/30 职场文书
三年大学生活自我鉴定
2014/01/21 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
意向协议书范本
2014/04/23 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
干部年终考核评语
2015/01/04 职场文书
2015年大学迎新工作总结
2015/07/16 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
市级三好生竞选稿
2015/11/21 职场文书
MySQL基于索引的压力测试的实现
2021/11/07 MySQL