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类型增加方法的实现代码(增加功能)
Dec 29 Javascript
iframe 上下滚动条如何默认在下方实现原理
Dec 10 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
第九章之路径分页标签与徽章组件
Apr 25 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 Javascript
javascript回到顶部特效
Jul 30 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
Aug 14 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
Nov 11 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
关于RxJS Subject的学习笔记
Dec 05 Javascript
对layer弹出框中icon数字参数的说明介绍
Sep 04 Javascript
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目录导航文件代码
2006/10/09 PHP
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
PHP parse_url 一个好用的函数
2009/10/03 PHP
php 文章采集正则代码
2009/12/28 PHP
提高PHP编程效率 引入缓存机制提升性能
2010/02/15 PHP
使用PHP求两个文件的相对路径
2013/06/20 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
2014/04/10 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
python私有属性和方法实例分析
2015/01/15 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
Python面向对象程序设计之私有属性及私有方法示例
2019/04/08 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
python实现复制大量文件功能
2019/08/31 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
开发中都用到了那些设计模式?用在什么场合?
2014/08/21 面试题
公司财务工作总结的自我评价
2013/11/23 职场文书
家属联谊会致辞
2015/07/31 职场文书