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 相关文章推荐
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
Mar 12 Javascript
jQuery DOM操作实例
Mar 05 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
javascript生成随机数方法汇总
Nov 12 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
jQuery实现文档树效果
Feb 20 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
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常见的魔术方法详解
2014/12/25 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
JS中showModalDialog 的使用解析
2013/04/17 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
Javascript中的包装类型介绍
2015/04/02 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
详解微信UnionID作用
2019/05/15 Javascript
Python中扩展包的安装方法详解
2017/06/14 Python
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
Tesserocr库的正确安装方式
2018/10/19 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
pytorch ImageFolder的覆写实例
2020/02/20 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
大学生水文观测实习自我鉴定
2013/09/29 职场文书
商务日语毕业生自荐信
2013/11/23 职场文书
技术学校毕业生求职信分享
2013/12/02 职场文书
最新的互联网创业计划书
2014/01/10 职场文书
小松树教学反思
2014/02/11 职场文书
应届毕业生自荐书
2014/06/18 职场文书
金融与证券专业求职信
2014/06/22 职场文书
生活小常识广播稿
2014/09/16 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
销售员未完成销售业绩的检讨书
2014/10/12 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
幼儿教师师德培训心得体会
2016/01/09 职场文书