jQuery实现点击下拉框中的值累加到文本框中的方法示例


Posted in jQuery onOctober 28, 2017

本文实例讲述了jQuery实现点击下拉框中的值累加到文本框中的方法。分享给大家供大家参考,具体如下:

先来看看运行效果:

 jQuery实现点击下拉框中的值累加到文本框中的方法示例

具体代码如下:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <title>3water.com jQuery添加下拉框元素</title>
 <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<!-- 加在body标签中屏蔽右键 oncontextmenu="return false" -->
<body >
<select name="city" id="s2" lay-search>
 <option value="">请选择</option>
 <option value="layer">layer</option>
 <option value="form">form</option>
 <option value="layim">layim</option>
</select>
<button class="layui-btn " type="button" id="add_subject">添加</button>
<input name="subject" id="subject" type="text" data-label="," value="">
<script>
  var seleVal='';
  $("#add_subject").on("click",function(){
    seleVal+=$("#s2>option:selected").val()+',';
    $("#subject").val(seleVal);
  })
</script>
</body>
</html>

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

jQuery 相关文章推荐
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
jQuery实现回到顶部效果
Oct 19 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 #jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 #jQuery
关于jQuery里prev()的简单操作代码
Oct 27 #jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 #jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 #jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 #jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 #jQuery
You might like
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
php 分页类 扩展代码
2009/06/11 PHP
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
PHP数组实际占用内存大小原理解析
2020/12/11 PHP
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
JS轮播图的实现方法
2020/08/24 Javascript
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
python中matplotlib实现随鼠标滑动自动标注代码
2020/04/23 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
将HTML5 Canvas的内容保存为图片借助toDataURL实现
2013/05/20 HTML / CSS
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
爸爸的花儿落了教学反思
2014/02/20 职场文书
双语教学实施方案
2014/03/23 职场文书
党员创先争优活动总结
2014/05/04 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
上甘岭观后感
2015/06/10 职场文书
小学语文教师研修日志
2015/11/13 职场文书
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python
Redis集群的关闭与重启操作
2021/07/07 Redis
Nginx 常用配置
2022/05/15 Servers
Mysql 一主多从的部署
2022/05/20 MySQL