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编程起步(第六课)
Feb 27 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
Apr 04 Javascript
采用call方式实现js继承
May 20 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
浅谈Javascript事件对象
Feb 05 Javascript
react系列从零开始_简单谈谈react
Jul 06 Javascript
Typescript的三种运行方式(小结)
Sep 18 Javascript
Element-UI 使用el-row 分栏布局的教程
Oct 26 Javascript
微信小程序实现多张图片上传功能
Nov 18 Javascript
node.js通过Sequelize 连接MySQL的方法
Dec 28 Javascript
vue项目支付功能代码详解
Feb 18 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 动态执行带有参数的类方法
2009/04/10 PHP
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
jquery事件与函数的使用介绍
2013/09/29 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
jQuery实现的五子棋游戏实例
2015/06/13 Javascript
jQuery动态添加与删除tr行实例代码
2016/10/18 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
vue swipe自定义组件实现轮播效果
2019/07/03 Javascript
微信小程序页面调用自定义组件内的事件详解
2019/09/12 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
python中的yield使用方法
2014/02/11 Python
基于Python的身份证号码自动生成程序
2014/08/15 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
HTML5标签小集
2011/08/02 HTML / CSS
工艺工程师工作职责
2013/11/23 职场文书
考试违纪检讨书
2014/02/02 职场文书
安踏广告词改编版
2014/03/21 职场文书
小城镇建设汇报材料
2014/08/16 职场文书
2015年高校图书馆工作总结
2015/04/30 职场文书
离婚被告代理词
2015/05/23 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
工作证明书
2015/06/15 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
网络安全倡议书(3篇)
2019/09/18 职场文书
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS