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插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
jQuery+pjax简单示例汇总
Apr 21 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jquery实现简单每周轮换的日历
Sep 10 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
克隆一个新项目的快捷方式
2013/04/10 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
ArrayList类(增强版)
2007/04/04 Javascript
javascript 简练的几个函数
2009/08/29 Javascript
JS实现self的resend
2010/07/22 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
详解Angular 4.x Injector
2017/05/04 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
layui导出所有数据的例子
2019/09/10 Javascript
python 正则表达式 概述及常用字符
2009/05/04 Python
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
python多维数组切片方法
2018/04/13 Python
python使用Matplotlib绘制分段函数
2018/09/25 Python
python实现贪吃蛇小游戏
2020/03/21 Python
详解Python用三种方式统计词频的方法
2019/07/29 Python
python 贪心算法的实现
2020/09/18 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
解决pytorch 的state_dict()拷贝问题
2021/03/03 Python
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
技校生自我鉴定范文
2013/09/26 职场文书
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
股权收购意向书
2014/04/01 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
就业证明函
2015/06/17 职场文书
小学数学国培研修日志
2015/11/13 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers