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学习笔记1——操作属性


下一篇:第一次使用并配置Hibernate