.val()
.val() Returns: String, Array
Description: Get the current value of the first element in the set of matched elements.
version added: 1.0.val()
The .val() method is primarily used to get the values of form elements. In the case of <select multiple="multiple"> elements, the .val() method returns an array containing each selected option.
For selects and checkboxes, you can also use the :selected and :checked selectors to get at values, for example:
$('select.foo option:selected').val(); // get the value from a dropdown select
$('select.foo').val(); // get the value from a dropdown select even easier
$('input:checkbox:checked').val(); // get the value from a checked checkbox
$('input:radio[name=bar]:checked').val(); // get the value from a set of radio buttons
Examples:
Example: Get the single value from a single select and an array of values from a multiple select and display their values.
<!DOCTYPE html>
<html>
<head>
<style>
p { color:red; margin:4px; }
b { color:blue; }
</style>
<script src="/scripts/jquery-1.4.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:
Example: Find the value of an input box.
<!DOCTYPE html>
<html>
<head>
<style>
p { color:blue; margin:8px; }
</style>
<script src="/scripts/jquery-1.4.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 ) Returns: jQuery
Description: Set the value of each element in the set of matched elements.
-
version added: 1.0.val( value )
valueA string of text or an array of strings to set as the value property of each matched element.
-
version added: 1.4.val( function )
functionA function returning the value to set.
This method is typically used to set the values of form fields. For <select multiple="multiple"> elements, multiple <option>s can be selected by passing in an array.
The .val() method allows us to set the value by passing in a function:
$('input:text.items').val(function() {
return this.value + ' ' + this.className;
});
This example appends the string "items" to the text inputs' values.
In jQuery 1.2, this is also able to set the value of select elements, but selecting the appropriate options.
Examples:
Example: Set the value of an input box.
<!DOCTYPE html>
<html>
<head>
<style>
button { margin:4px; cursor:pointer; }
input { margin:4px; color:blue; }
</style>
<script src="/scripts/jquery-1.4.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:
Example: Set a single select and a multiple select .
<!DOCTYPE html>
<html>
<head>
<style>
body { color:blue; }
</style>
<script src="/scripts/jquery-1.4.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>