JQuery val()
JQuery val()方法有两种用法。
用于获取匹配元素集中第一个元素的当前值。
它用于设置每个匹配元素的值。
语法:
用于获取值。
用于设置值。
$(selector).val(function(index,currentvalue))
它用于使用函数设置值。
JQuery val()方法的参数
| 参数 |
说明 |
| value |
这是强制性参数。用于指定属性的值。 |
| function(index,currentvalue) |
这是一个可选参数。它用于指定一个函数，该函数返回要设置的值。 |
JQuery val()示例
val()方法主要用于获取表单元素的值。此方法不接受任何参数。当没有选择任何选项时，此方法返回NULL，并且在一个或多个选择的情况下，它返回一个包含每个选定选项的值的数组。
让我们看一下val()方法的示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>val demo</title>
<style>
p {
color: red;
margin: 4px;
}
b {
color: blue;
}
</style>
<script src="/JQuery-1.10.2.js"></script>
</head>
<body>
<p></p>
<select id="single">
<option>Single</option>
<option>Double</option>
<option>Triple</option>
</select>
<script>
function displayVals() {
var singleValues = $("#single").val();
$("p").html( "<b>Value:</b> " + singleValues);
}
$("select").change( displayVals );
displayVals();
</script>
</body>
</html>
输出:
让我们看看带有单个和多个选择框的JQuery val()方法的示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>val demo</title>
<style>
p {
color: red;
margin: 4px;
}
b {
color: blue;
}
</style>
<script src="/JQuery-1.10.2.js"></script>
</head>
<body>
<p></p>
<select id="single">
<option>Single</option>
<option>Single2</option>
<option>Single3</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option>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>
输出:
JQuery val(value)示例
此方法用于设置文本字符串，数字，与每个匹配值对应的字符串数组元件。此方法可帮助您通过传入函数来设置值。
让我们看一下val(value)方法的示例。
<!DOCTYPE html>
<html>
<head>
<script src="/JQuery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("input:text").val("lidihuo");
});
});
</script>
</head>
<body>
<p>Name: <input type="text" name="user"></p>
<button>Set the value of the input field</button>
</body>
</html>
输出:
