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

今天药忘吃喽~ 2022-03-30 04:56 284阅读 0赞

**一、概述**

在web页面开发中，经常需要获取和设置表单元素的值（如文本框中的内容），特别是在ajax应用中，更是常态。本文系统的介绍下如何操作。

同操作其它html元素一样，操作的过程差不多。

第一步，需要获取到表单元素对应的jquery（或dom）对象。这个主要是利用jquery的选择器机制。

第二步，调用表单元素的属性和方法来获取和设置值。

其中最常见的就是利用jquery对象的val方法。因为很多表单元素都有标准的 value属性，这个可以通过jquery的 val方法来读取和设置属性值。

如：

alert($("\#mytextarea").val()); //获取文本区中的内容

$("\#mytextarea").val("good"); //设置内容

不同的表单元素有自己不同的地方，下面我们逐个介绍。

二、**文本框和文本域**

这两个元素，利用jquery对象的val方法就可以完成相关的操作。如：

文本框和文本域内容读写方式是一样的

获取内容

var value = $("\#item").val()

设置内容

$("\#item").val("hello");

**三、下拉框和列表框**

在html表单中，下拉框和列表框都是对应select标签，其区别在于size属性的设置。

一个最简单的select元素

</select>

上面这种写法它表现的是一个下拉框 ，我们可以给select标签设置size属性让它变为列表框，如：<select id="item" size=3>，这样就是一个列表框。

下拉框就相当于设置 size =1 或0 . 注意 ，如果是下拉框，第一个option是默认选中的，如果是列表框(size值大于1),则没有默认选中的项。

无论是下拉还是列表框，对其最常见的操作就是获取和设置当前选中的option。

**1、静态设置选中**

给option 元素添加 selected标记，则该元素会被选中。如：

</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属性