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。
四、小结
本文介绍了如何操作表单元素中的文本框和下拉框。后续的文章中对其它表单元素分别介绍。
