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数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
Apr 27 Javascript
jQuery过滤选择器详解
Jan 13 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
Feb 25 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
浅谈javascript的闭包
Jan 23 Javascript
JavaScript阻止表单提交方法(附代码)
Aug 15 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 Javascript
js判断鼠标移入移出方向的方法
Jun 24 Javascript
JS开发前端团队展示控制器来为成员引流
Aug 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
PHP制作用户注册系统
2015/10/23 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
php常用经典函数集锦【数组、字符串、栈、队列、排序等】
2019/08/23 PHP
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
JavaScript中Math对象的方法介绍
2017/01/05 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
基于vue实现swipe分页组件实例
2017/05/25 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
Python脚本实现自动发带图的微博
2016/04/27 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
Python list和str互转的实现示例
2020/11/16 Python
美国在线购买和出售礼品卡网站:EJ Gift Cards
2019/06/09 全球购物
弘扬雷锋精神活动演讲稿
2014/03/04 职场文书
保护环境标语
2014/06/09 职场文书
超市七夕促销活动方案
2014/08/28 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
工作能力自我评价2015
2015/03/05 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技