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 必知必会之closure
Sep 21 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
Feb 27 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
浅析IE10兼容性问题(frameset的cols属性)
Jan 03 Javascript
angularjs中的e2e测试实例
Dec 06 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
Jun 13 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
react-native android状态栏的实现
Jun 15 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 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实现的css文件背景图片下载器代码
2014/11/11 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
AngularJS内置指令
2015/02/04 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
vue快捷键与基础指令详解
2017/06/01 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
2018/12/10 Javascript
详解React服务端渲染从入门到精通
2019/03/28 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
python中的sort方法使用详解
2014/07/25 Python
Python实现基于HTTP文件传输实例
2014/11/08 Python
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
python 自动识别并连接串口的实现
2021/01/19 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
浪费资源的建议书
2014/03/12 职场文书
大学生就业意向书范文
2014/04/01 职场文书
行政经理岗位职责
2015/04/15 职场文书
大学同学聚会感言
2015/07/30 职场文书
javascript数组includes、reduce的基本使用
2021/07/02 Javascript