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 相关文章推荐
文本框的字数限制功能jquery插件
Nov 24 Javascript
Javascript的并行运算实现代码
Nov 19 Javascript
javascript实现存储hmtl字符串示例
Apr 25 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
May 20 Javascript
Bootstrap基本样式学习笔记之表单(3)
Dec 07 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 Javascript
JavaScript引用类型Object常见用法实例分析
Aug 08 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
vue实现购物车选择功能
Jan 10 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
Apr 14 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
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
2018/01/25 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
详解Python中的条件判断语句
2015/05/14 Python
python使用邻接矩阵构造图代码示例
2017/11/10 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
python读取和保存图片5种方法对比
2018/09/12 Python
浅谈Scrapy网络爬虫框架的工作原理和数据采集
2019/02/07 Python
python利用tkinter实现屏保
2019/07/30 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
python super用法及原理详解
2020/01/20 Python
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
Banana Republic英国官网:香蕉共和国,GAP集团旗下偏贵族风
2018/04/24 全球购物
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
医学生自荐信
2013/12/03 职场文书
庆国庆活动总结
2014/08/28 职场文书
法定代表人证明书
2014/11/28 职场文书
大学生见习总结报告
2015/06/24 职场文书
小学体育教学随笔
2015/08/14 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
通过Qt连接OpenGauss数据库的详细教程
2021/06/23 PostgreSQL
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python