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 Demo模态窗口
Dec 06 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
Jquery响应回车键直接提交表单操作代码
Jul 25 Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
微信JS-SDK选取手机照片上传功能
Apr 21 Javascript
React+EggJs实现断点续传的示例代码
Jul 07 Javascript
使用TS来编写express服务器的方法步骤
Oct 29 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
mysq GBKl乱码
2006/11/28 PHP
php5中类的学习
2008/03/28 PHP
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
探讨php define()函数及defined()函数使用详解
2013/06/09 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
php 伪造HTTP_REFERER页面URL来源的三种方法
2016/09/22 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
学习ExtJS TextField常用方法
2009/10/07 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
用Jquery.load载入页面实现局部刷新
2014/01/22 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
JS使用eval()动态创建变量的方法
2016/06/03 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
Vue 实现展开折叠效果的示例代码
2018/08/27 Javascript
javascript实现动态时钟的启动和停止
2020/07/29 Javascript
一个超级简单的python web程序
2014/09/11 Python
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
python实现解数独程序代码
2017/04/12 Python
python中字符串变二维数组的实例讲解
2018/04/03 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
python如何支持并发方法详解
2020/07/25 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
教育专业自荐书范文
2013/12/17 职场文书
创业资金计划书
2014/02/06 职场文书
百日安全生产活动总结
2014/07/05 职场文书
社区好人好事材料
2014/12/26 职场文书
python中的装饰器该如何使用
2021/06/18 Python
python语言中pandas字符串分割str.split()函数
2022/08/05 Python