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类型增加方法的实现代码(增加功能)
Dec 29 Javascript
javascript时区函数介绍
Sep 14 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
提高Web性能的前端优化技巧总结
Feb 27 Javascript
vue.js实现刷新当前页面的方法教程
Jul 05 Javascript
VUE element-ui 写个复用Table组件的示例代码
Nov 18 Javascript
vue两组件间值传递 $router.push实现方法
May 15 Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 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
PHP6 mysql连接方式说明
2009/02/09 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
js兼容的placeholder属性详解
2013/08/18 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
js生成随机数的方法实例
2015/10/16 Javascript
使用 jQuery 实现表单验证功能
2017/07/05 jQuery
js下拉菜单生成器dropMenu使用方法详解
2017/08/01 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
图解Python中深浅copy(通俗易懂)
2020/09/03 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
美国最大的旗帜经销商:Carrot-Top
2018/02/26 全球购物
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
开学典礼策划方案
2014/05/28 职场文书
成绩单评语
2015/01/04 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
护士求职自荐信
2015/03/25 职场文书
中标通知书范本
2015/04/17 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
python3+PyQt5+Qt Designer实现界面可视化
2021/06/10 Python
MySQL查询日期时间
2022/05/15 MySQL
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS