.val()
.val() 返回： String, Array
描述： 获取匹配的元素集合中第一个元素的当前值。
version added: 1.0.val()
.val() 方法主要用于获取表单元素的值。至于 <select multiple="multiple"> 元素, .val()方法返回一个包含每个选中的 option 的数组。
对于 下拉框（select） 和复选框（checkbox）, 你也可以使用:selected 和 :checked选择器来获取值，举个例子：
$('select.foo option:selected').val(); // 从下拉框中获取值
$('select.foo').val(); // 从一个或更多的下拉框中获取值
$('input:checkbox:checked').val(); // 从选中的复选框中获取值
$('input:radio[name=bar]:checked').val(); // 从单选选框中获取值
举例：
例子： 从一个select中获取一个单一的。和一个包含多个选中的 option 的值的数组。并显示他们：
<!DOCTYPE html>
<html>
<head>
<style>
p { color:red; margin:4px; }
b { color:blue; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<p></p>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
<script>
function displayVals() {
var singleValues = $("#single").val();
var multipleValues = $("#multiple").val() || [];
$("p").html("<b>Single:</b> " +
singleValues +
" <b>Multiple:</b> " +
multipleValues.join(", "));
}
$("select").change(displayVals);
displayVals();
</script>
</body>
</html>Demo:
例子： 获取文本框的值
<!DOCTYPE html>
<html>
<head>
<style>
p { color:blue; margin:8px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<input type="text" value="some text"/>
<p></p>
<script>
$("input").keyup(function () {
var value = $(this).val();
$("p").text(value);
}).keyup();
</script>
</body>
</html>Demo:
.val( value ) 返回： jQuery
描述： 设置匹配的元素集合中每个元素的值。
-
version added: 1.0.val( value )
value一个文本字符串或一个以字符串形式的数组来设定每个匹配元素的值。
-
version added: 1.4.val( function(index, value) )
function(index, value)一个用来返回设置值的函数。
这个方法通常是用来设置表单域的值。 对于 <select multiple="multiple"> 元素, 多个 <option>可以通过一个数组来选中。
.val() 方法允许我们通过一个函数来设置这个值。 在 jQuery 1.4 中， 这个函数通过两个参数，当前元素的所引值和它当前的值：
$('input:text.items').val(function(index, value) {
return value + ' ' + this.className;
});
这个例子将字符串" items" 附给文本框。
举例：
例子： 设置文本框的值。
<!DOCTYPE html>
<html>
<head>
<style>
button { margin:4px; cursor:pointer; }
input { margin:4px; color:blue; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<div>
<button>Feed</button>
<button>the</button>
<button>Input</button>
</div>
<input type="text" value="click a button" />
<script>
$("button").click(function () {
var text = $(this).text();
$("input").val(text);
});
</script>
</body>
</html>Demo:
例子： 这只一个单选下拉框和一个多选框。
<!DOCTYPE html>
<html>
<head>
<style>
body { color:blue; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" name="checkboxname" value="check1"/> check1
<input type="checkbox" name="checkboxname" value="check2"/> check2
<input type="radio" name="r" value="radio1"/> radio1
<input type="radio" name="r" value="radio2"/> radio2
<script>
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check1","check2", "radio1" ]);
</script>
</body>
</html>