Jquery中val()表单取值赋值的实例代码


Posted in Javascript onAugust 15, 2013

jQuery提供了强大的val()方法来处理value相关操作。
获得单个select的值和多选select的值。

HTML 代码:
<p></p><br/>
<select id="single">
  <option>Single</option>
  <option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
  <option selected="selected">Multiple</option>
  <option>Multiple2</option>
  <option selected="selected">Multiple3</option>
</select>
jQuery 代码:
$("p").append(
  "<b>Single:</b> "   + $("#single").val() +
  " <b>Multiple:</b> " + $("#multiple").val().join(", ")
);
结果:
[ <p><b>Single:</b>Single<b>Multiple:</b>Multiple, Multiple3</p>]

获取文本框中的值
HTML 代码:
<input type="text" value="some text"/>
jQuery 代码:
$("input").val();

结果:
some text
下面是var()能获取/赋予表单元素值
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>val()方法</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script language="javascript">
$(function(){
$("input[type=button]").click(function(){
var sValue=$(this).val();//先获取按钮的value值
$("input[type=text]").val(sValue); //赋给文本框
});
});
</script>
</head>
<body>
<p>
<input type="button" value="Feed">
    <input type="button" value="the">
    <input type="button" value="Input">
</p>
<p>
<input type="text" value="click a button">
</p>
</body>
</html>

注意:var data=$("#myId").val();
如果myid不存在,data为undefined
Javascript 相关文章推荐
javascript 得到文件后缀名的思路及实现
May 09 Javascript
jquery选择器、属性设置用法经验总结
Sep 08 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
Apr 08 Javascript
jQuery中wrapAll()方法用法实例
Jan 16 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 Javascript
JavaScript评论点赞功能的实现方法
Mar 13 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
Vue-cli配置打包文件本地使用的教程图解
Aug 02 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
jquery ajax方式直接提交整个表单核心代码
Aug 15 #Javascript
js冒泡法和数组转换成字符串示例代码
Aug 14 #Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 #Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 #Javascript
Javascript中判断变量是数组还是对象(array还是object)
Aug 14 #Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
Aug 14 #Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
Aug 14 #Javascript
You might like
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
PHP中的session安全吗?
2016/01/22 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
解决vue 退出动画无效的问题
2020/08/09 Javascript
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
利用 python 对目录下的文件进行过滤删除
2017/12/27 Python
如何在Django中设置定时任务的方法示例
2019/01/18 Python
python3下载抖音视频的完整代码
2019/06/05 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
python字符串判断密码强弱
2020/03/18 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
医院护士求职自荐信格式
2013/09/21 职场文书
门卫岗位安全职责
2013/12/13 职场文书
大学军训感言1000字
2014/02/25 职场文书
铲车司机岗位职责
2014/03/15 职场文书
会计专业毕业生求职信
2014/07/04 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
欠款证明
2015/06/24 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书
导游词之任弼时故居
2020/01/07 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
Python Matplotlib绘制动画的代码详解
2022/05/30 Python