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获得鼠标的坐标值的方法
Mar 13 Javascript
JS 日期比较大小的简单实例
Jan 13 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
Jquery 实现弹出层插件
Jan 28 Javascript
整理Javascript流程控制语句学习笔记
Nov 29 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 Javascript
Vue 中axios配置实例详解
Jul 27 Javascript
vue实现自定义日期组件功能的实例代码
Nov 06 Javascript
微信小程序rich-text富文本用法实例分析
May 20 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 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 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
ThinkPHP CURD方法之data方法详解
2014/06/18 PHP
php开发工具有哪五款
2015/11/09 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
Nodejs学习笔记之NET模块
2015/01/13 NodeJs
js实现分享到随页面滚动而滑动效果的方法
2015/04/10 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
浅谈JavaScript对象的创建方式
2016/06/13 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
深入理解JavaScript中的预解析
2017/01/04 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
vue深入解析之render function code详解
2017/07/18 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
vue项目引入字体.ttf的方法
2018/09/28 Javascript
vue实现评论列表功能
2019/10/25 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
Django rest framework工具包简单用法示例
2018/07/20 Python
keras topN显示,自编写代码案例
2020/07/03 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
C语言如何决定使用那种整数类型
2016/11/26 面试题
介绍一下gcc特性
2012/01/20 面试题
欠条范文
2015/07/03 职场文书
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS
Python基础之常用库常用方法整理
2021/04/30 Python
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers