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 相关文章推荐
许愿墙中用到的函数
Oct 07 Javascript
永不消失的title提示代码
Feb 15 Javascript
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 Javascript
js实现简单锁屏功能实例
May 27 Javascript
JavaScript程序设计之JS调试
Dec 09 Javascript
非常棒的jQuery图片轮播效果
Apr 17 Javascript
JS中微信小程序自定义底部弹出框
Dec 22 Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 Javascript
你应该知道的几类npm依赖包管理详解
Oct 06 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 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和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
php微信开发自定义菜单
2016/08/27 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
五段实用的js高级技巧
2011/12/20 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
JS替换字符串中字符即替换全部而不是第一个
2014/06/04 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
vue 页面加载进度条组件实例
2018/02/05 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
[55:45]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.24
2019/09/10 DOTA
Python Sleep休眠函数使用简单实例
2015/02/02 Python
python根据时间生成mongodb的ObjectId的方法
2015/03/13 Python
Python实现单词拼写检查
2015/04/25 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
python之验证码生成(gvcode与captcha)
2019/01/02 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
Python文件操作基础流程解析
2020/03/19 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
extern是什么意思
2016/03/10 面试题
施工人员岗位职责
2013/12/12 职场文书
地理科学专业自荐信
2014/09/01 职场文书
求职简历自我评价2015
2015/03/10 职场文书
质检员工作总结2015
2015/04/25 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang