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 相关文章推荐
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
Feb 24 Javascript
node-http-proxy修改响应结果实例代码
Jun 06 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
JavaScript6 let 新语法优势介绍
Jul 15 Javascript
JS中用try catch对代码运行的性能影响分析
Dec 26 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
Jan 04 Javascript
基于jQuery实现瀑布流页面
Apr 11 jQuery
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
vuex vue简单使用知识点总结
Aug 29 Javascript
Vue的状态管理vuex使用方法详解
Feb 05 Javascript
前端 javascript 实现文件下载的示例
Nov 24 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 session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
php自定义的格式化时间示例代码
2013/12/05 PHP
完美实现wordpress禁止文章修订和自动保存的方法
2014/11/03 PHP
PHP使用xpath解析XML的方法详解
2017/05/20 PHP
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
javascript 运算数的求值顺序
2011/08/23 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
Visual Studio中js调试的方法图解
2014/06/30 Javascript
jQuery中的jQuery()方法用法分析
2014/12/27 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
2019/07/05 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
OpenCV+Python识别车牌和字符分割的实现
2019/01/31 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
使用 python pyautogui实现鼠标键盘控制功能
2019/08/04 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
外贸公司实习自我鉴定
2013/09/24 职场文书
课改先进个人汇报材料
2014/01/26 职场文书
参赛口号
2014/06/16 职场文书
小学老师对学生的评语
2014/12/29 职场文书
工作检讨书范文
2015/01/23 职场文书
党支部鉴定意见
2015/06/02 职场文书
中学政教处工作总结
2015/08/13 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记