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实现二分查找法实现代码
Nov 12 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 Javascript
jQuery设置与获取HTML,文本和值的简单实例
Feb 26 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 Javascript
vue的Virtual Dom实现snabbdom解密
May 03 Javascript
详解webpack编译多页面vue项目的配置问题
Dec 11 Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
Sep 21 Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
May 14 Javascript
JS如何在数组指定位置插入元素
Mar 10 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
php4的session功能评述(一)
2006/10/09 PHP
Smarty中的注释和截断功能介绍
2015/04/09 PHP
PHP模块化安装教程
2016/06/01 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
使用Firebug对js进行断点调试的图文方法
2011/04/02 Javascript
jQuery为iframe的body添加click事件的实现代码
2011/04/07 Javascript
ajax java 实现自动完成功能
2012/12/19 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
JavaScript中如何判断一个值的类型
2017/09/15 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
vue+element实现表格新增、编辑、删除功能
2019/05/28 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
2019/10/10 jQuery
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
django文档学习之applications使用详解
2018/01/29 Python
python如何实现int函数的方法示例
2018/02/19 Python
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
tensorflow的计算图总结
2020/01/12 Python
pytorch的batch normalize使用详解
2020/01/15 Python
python os模块在系统管理中的应用
2020/06/22 Python
pycharm如何使用anaconda中的各种包(操作步骤)
2020/07/31 Python
Ibatis如何调用存储过程
2015/05/15 面试题
秋季运动会加油稿200字
2014/01/11 职场文书
刑事和解协议书范本
2014/11/19 职场文书
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python