Jquery学习笔记:操作form表单元素之一(文本框和下拉框)
一、概述
在web页面开发中,经常需要获取和设置表单元素的值(如文本框中的内容),特别是在ajax应用中,更是常态。本文系统的介绍下如何操作。
同操作其它html元素一样,操作的过程差不多。
第一步,需要获取到表单元素对应的jquery(或dom)对象。这个主要是利用jquery的选择器机制。
第二步,调用表单元素的属性和方法来获取和设置值。
其中最常见的就是利用jquery对象的val方法。因为很多表单元素都有标准的 value属性,这个可以通过jquery的 val方法来读取和设置属性值。
如:
<textarea id="mytextarea">ddd</textarea>
alert($("#mytextarea").val()); //获取文本区中的内容
$("#mytextarea").val("good"); //设置内容
不同的表单元素有自己不同的地方,下面我们逐个介绍。
二、文本框和文本域
这两个元素,利用jquery对象的val方法就可以完成相关的操作。如:
<input type="text" id="item" value="good">
<textarea id="item">some msg</textarea>
文本框和文本域内容读写方式是一样的
获取内容
var value = $("#item").val()
设置内容
$("#item").val("hello");
三、下拉框和列表框
在html表单中,下拉框和列表框都是对应select标签,其区别在于size属性的设置。
一个最简单的select元素
<select id="item">
<option value="v1">值1</option>
<option value="v2">值2</option>
<option value="v3">值3</option>
</select>
上面这种写法它表现的是一个下拉框 ,我们可以给select标签设置size属性让它变为列表框,如:<select id="item" size=3>,这样就是一个列表框。
下拉框就相当于设置 size =1 或0 . 注意 ,如果是下拉框,第一个option是默认选中的,如果是列表框(size值大于1),则没有默认选中的项。
无论是下拉还是列表框,对其最常见的操作就是获取和设置当前选中的option。
1、静态设置选中
给option 元素添加 selected标记,则该元素会被选中。如:
<select id="item">
<option value="v1">值1</option>
<option value="v2" selected>值2</option>
<option value="v3">值3</option>
</select>
这时打开页面,默认value属性为v2的option被选中了。这时调用 $("#item").val() 返回的值是 v2,该值是被选中的option的value属性。
2、动态设置选中
调用$("#item").val("值") 方法,就会选中值为val参数的option项。如果参数值对应的option不存在,则下拉框就会没有任何被选中的项,这时调用$("#item").val() 返回的值是null 。
3、操作被选中项的序号
除了调用 $("#item").val() 可以直接获取被选中项的value值外。还可以利用 $("#item").prop("selectedIndex") 获取selectedIndex属性值,当列表有被选中的option时,则该属性值为该option的序号(注意从0开始),如果列表没有被选中的,则该属性值为-1。
还有通过改变selectedIndex的值来设置被选中项,如
$("#item").prop("selectedIndex",2) 表示第3个元素被选中。
4、获取被选中的option对象(元素)
利用jquery选择器 ,如 $("#item option:selected") 可以获取到被选中的option对象。如:
var obj = $("#item option:selected");
alert(obj.prop("value")); //显示option的value属性
alert(obj.prop("text")); //显示option的text属性
5、获取option元素
因为option也是一个html标签,就可以同普通的html标签一样去通过js访问它。
利用options属性可以获取到所有option元素
如:$("#item").prop("options") 返回所有的option对象(注意是dom对象,不是jquery对象)
$("#item").prop("options")[0].value //第一个option的value属性
$("#item").prop("options")[0].text //第一个option的text值,就是显示的文本内容
还可以直接通过选择器来操作,如:
var obj = $("#item option"); //获取所有的option元素
obj.each(function(index,data){
alert(data.value);
});
6、length属性
利用 $("#item").prop("length") 可以获取select元素option的个数
当然还有其它方法,如:
$("#item").prop("options").length
7、multiple属性
当给select元素设置multiple标记时,表示该列表框中元素可以被多选。
<select id="item" multiple size =3>
<option value="v1">值1</option>
<option value="v2" >值2</option>
<option value="v3">值3</option>
</select>
需要注意的是,如果设置多选,则需要设置size属性,让表现方式为列表框,这样才可以进行多选操作。 这时调用 val方法时,如果有多项被选中,则返回的值为多个选项的value以逗号分隔。如上面全选,则返回值为 v1,v2,v3。
注意,不能反而来通过 val("v1,v2")来同时设置多个选项被选中。这时就需要通过设置 selected属性来设置被选中了。如:
var obj = $("#item option"); //获取所有的option元素
obj.each(function(index,data){
$(data).prop("selected",true);
});
上面代码选中所有的option。
四、小结
本文介绍了如何操作表单元素中的文本框和下拉框。后续的文章中对其它表单元素分别介绍。
Jquery学习笔记:操作form表单元素之一(文本框和下拉框)的更多相关文章
- 前端 HTML form表单标签 select标签 option 下拉框
<select></select> select里面通常跟option配合使用 <!DOCTYPE html> <html lang="en&quo ...
- 学习笔记之form表单
form表单提交的数据 是字典类型 这样 方便在create时候 直接解压
- Jquery学习笔记:操作form表单元素之二(复选框和单选框)
在上面文章的基础上,我们介绍如何操作表单元素中的 复选框和单选框. 一.复选框 <label> <input type="checkbox" id="i ...
- Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法
Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法 昨天在开发的时候遇到个小问题,就是如何将Grid的内容与Form一起发送到服务器端.默认情况下,表单(F ...
- 第83天:jQuery中操作form表单
操作form表单 1. 属性操作 设置属性: // 第一个参数表示:要设置的属性名称 // 第二个参数表示:该属性名称对应的值 $(selector).attr(“title”, “传智播客”); 获 ...
- jquery实现ajax提交form表单的方法总结
本篇文章主要是对jquery实现ajax提交form表单的方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 方法一: function AddHandlingFeeToRefund( ...
- html基本标签表单实现交互原理,单选框,复选框,下拉框介绍
表单是什么?表单是前端和服务器做交互的一种机制,表单收集用户输入信息,之后发送或者提交给服务器.用户在输入的信息称之为内容,内容的文本分为普通和密码型,用户通过单选框.复选框.下拉框(也就是下拉菜单) ...
- struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input
原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1 function dosearch() {2 if ($(&q ...
- 通过jquery来实现文本框和下拉框动态添加效果,能根据自己的需求来自定义最多允许添加数量,实用的jquery动态添加文本框特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 「OC」类的深入研究、description方法和sel
一.类的深入研究 (一)类的本质 类本身也是一个对象,是class类型的对象,简称“类对象”. Class类型的定义: Typedef struct obj class *class; 类名就代表着类 ...
- leetcode208 happynumber
19 is a happy number 12 + 92 = 82 82 + 22 = 68 62 + 82 = 100 12 + 02 + 02 = 1 class Solution {public ...
- BZOJ 100题留念
- c# 流程控制
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- Python学习之路——模块
一.模块: 模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需 ...
- django template出错
解决方法一: 先导入settings >>> from django.conf import settings >>> settings.configure() & ...
- MouseOver/MouseOut vs MouseEnter/MouseLeave
参考 http://www.oschina.net/question/234345_45280 这是jQuery提供的函数 要注意MouseOut 和 MouseLeave的区别 比如对元素A绑定Mo ...
- ios7下二维码功能的实现
苹果公司升级到IOS7后自己的PassBook自带二维码扫描功能,所以现在使用二维码功能不需要在借助第三方库了 使用前请先导入AVFoundation.frameWork // // YHQView ...
- IT第七天 - 类及其属性、方法的理解,断点调试初识,代码优化总结,编程逻辑培养
IT第七天 上午 类 1.对象:是多个实体抽象出来的共同点集合,对象包括:属性(即实体的特征).方法(即尸体的功能作用) 2.程序中,用类来模拟对象 3.类是抽象的,是对象的类型,是将多个拥有相同属性 ...
- Uva 12569 Planning mobile robot on Tree (EASY Version)
基本思路就是Bfs: 本题的一个关键就是如何判段状态重复. 1.如果将状态用一个int型数组表示,即假设为int state[17],state[0]代表机器人的位置,从1到M从小到大表示障碍物的位置 ...