Jquery学习笔记：操作form表单元素之一（文本框和下拉框）

Posted 2020-06-13

一、概述

在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。

 

四、小结

本文介绍了如何操作表单元素中的文本框和下拉框。后续的文章中对其它表单元素分别介绍。