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 常用方法总结
Jun 03 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
Nov 23 Javascript
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
浅析JavaScript中的typeof运算符
Nov 30 Javascript
js获取上传文件大小示例代码
Apr 10 Javascript
JavaScript 表单处理实现代码
Apr 13 Javascript
js事件监听器用法实例详解
Jun 01 Javascript
javascript bom是什么及bom和dom的区别
Nov 26 Javascript
微信小程序实现自上而下字幕滚动
Jul 14 Javascript
在微信小程序里使用watch和computed的方法
Aug 02 Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
微信小程序获取当前时间及星期几的实例代码
Sep 20 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水印技术
2007/02/14 PHP
php stripslashes和addslashes的区别
2014/02/03 PHP
php使用百度天气接口示例
2014/04/22 PHP
PHP利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
js不完美解决click和dblclick事件冲突问题
2012/07/16 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
2018/09/18 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
2018/10/31 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
vue proxy 的优势与使用场景实现
2020/06/15 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
在Python中使用Mako模版库的简单教程
2015/04/08 Python
Python正则表达式教程之一:基础篇
2017/03/02 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
python_opencv用线段画封闭矩形的实例
2018/12/05 Python
python函数局部变量、全局变量、递归知识点总结
2019/11/15 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
python 安装impala包步骤
2020/03/28 Python
Python 操作 PostgreSQL 数据库示例【连接、增删改查等】
2020/04/21 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
python的dict判断key是否存在的方法
2020/12/09 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
Vans(范斯)新西兰官方网站:美国原创极限运动品牌
2020/09/19 全球购物
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
护士毕业生自荐信
2014/02/07 职场文书
中秋节慰问信
2015/02/15 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
python操作xlsx格式文件并读取
2021/06/02 Python