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用noConflict代替$的实现方法
Apr 12 jQuery
基于jQuery实现文字打印动态效果
Apr 21 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
jQuery实现视频展示效果
May 30 jQuery
jQuery实现二级导航菜单的示例
Sep 30 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
php.ini 中文版
2006/10/28 PHP
不错的PHP学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
PHP 变量类型的强制转换
2009/10/23 PHP
php 无法载入mysql扩展
2010/03/12 PHP
yii去掉必填项中星号的方法
2015/12/28 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
详解vue-validator(vue验证器)
2017/01/16 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
2017/04/21 jQuery
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
vue2.0全局组件之pdf详解
2017/06/26 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
web前端页面生成exe可执行文件的方法
2018/02/08 Javascript
vue中导出Excel表格的实现代码
2018/10/18 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
ptyhon实现sitemap生成示例
2014/03/30 Python
python绘图库Matplotlib的安装
2014/07/03 Python
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
python实现用户管理系统
2018/01/10 Python
Django中的Signal代码详解
2018/02/05 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
Java面试笔试题大全
2016/11/23 面试题
会计大学生职业生涯规划书范文
2014/01/13 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
冰峪沟导游词
2015/02/09 职场文书
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang