2010-09-16 17:13:38 +00:00
<!DOCTYPE html>
< html lang = 'en' > < head > < meta http-equiv = 'content-type' content = 'text/html; charset=UTF-8' / > < / head > < body >
2010-09-18 16:20:35 +00:00
< div data-role = "page" >
2010-09-21 14:58:54 +00:00
< div data-role = "header" >
2010-09-16 17:13:38 +00:00
< h1 > .val()< / h1 >
< / div >
2010-10-12 19:50:28 +00:00
< div data-role = "content" data-theme = "c" id = "val1" >
2010-09-16 17:13:38 +00:00
< h2 class = "jq-clearfix roundTop section-title" >
< span class = "name" > .val()< / span > < span class = "returns" > Returns: < a class = "return" href = "http://docs.jquery.com/Types#String,%20Array" > String, Array< / a > < / span >
< / h2 >
< div class = " entry-details" >
< p class = "desc" > < strong > Description: < / strong > Get the current value of the first element in the set of matched elements.< / p >
< ul class = "signatures" > < li class = "signature" id = "val" > < h4 class = "name" >
< span class = "versionAdded" > version added: < a href = "/category/version/1.0/" > 1.0< / a > < / span > .val()< / h4 > < / li > < / ul >
< div class = "longdesc" >
< p > The < code > .val()< / code > method is primarily used to get the values of form elements. In the case of < code > < select multiple="multiple"> < / code > elements, the < code > .val()< / code > method returns an array containing each selected option.< / p >
< p > For selects and checkboxes, you can also use the < a href = "/selected" > :selected< / a > and < a href = "/checked" > :checked< / a > selectors to get at values, for example:< / p >
< pre > $('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< / pre >
< / div >
< h3 > Examples:< / h3 >
< div id = "entry-examples" class = "entry-examples" >
< div id = "example-0" >
< h4 > Example: < span class = "desc" > Get the single value from a single select and an array of values from a multiple select and display their values.< / span >
< / h4 >
< pre > < code class = "example demo-code" > < !DOCTYPE html>
< html>
< head>
< style>
p { color:red; margin:4px; }
b { color:blue; }
< /style>
< script src="http://code.jquery.com/jquery-latest.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> < / code > < / pre >
< h4 > Demo:< / h4 >
< div class = "demo code-demo" > < / div >
< / div >
< div id = "example-1" >
< h4 > Example: < span class = "desc" > Find the value of an input box.< / span >
< / h4 >
< pre > < code class = "example demo-code" > < !DOCTYPE html>
< html>
< head>
< style>
p { color:blue; margin:8px; }
< /style>
< script src="http://code.jquery.com/jquery-latest.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> < / code > < / pre >
< h4 > Demo:< / h4 >
< div class = "demo code-demo" > < / div >
< / div >
< / div >
< / div >
< / div >
2010-10-12 19:50:28 +00:00
< div data-role = "content" data-theme = "c" id = "val2" >
2010-09-16 17:13:38 +00:00
< h2 class = "jq-clearfix roundTop section-title" >
< span class = "name" > .val( value )< / span > < span class = "returns" > Returns: < a class = "return" href = "http://docs.jquery.com/Types#jQuery" > jQuery< / a > < / span >
< / h2 >
< div class = " entry-details" >
< p class = "desc" > < strong > Description: < / strong > Set the value of each element in the set of matched elements.< / p >
< ul class = "signatures" >
< li class = "signature" id = "val-value" >
< h4 class = "name" >
< span class = "versionAdded" > version added: < a href = "/category/version/1.0/" > 1.0< / a > < / span > .val( value )< / h4 >
< p class = "arguement" > < strong > value< / strong > A string of text or an array of strings to set as the value property of each matched element.< / p >
< / li >
< li class = "signature" id = "val-functionindex, value" >
< h4 class = "name" >
< span class = "versionAdded" > version added: < a href = "/category/version/1.4/" > 1.4< / a > < / span > .val( function(index, value) )< / h4 >
< p class = "arguement" > < strong > function(index, value)< / strong > A function returning the value to set.< / p >
< / li >
< / ul >
< div class = "longdesc" >
< p > This method is typically used to set the values of form fields. For < code > < select multiple="multiple"> < / code > elements, multiple < code > < option> < / code > s can be selected by passing in an array.< / p >
< p > The < code > .val()< / code > method allows us to set the value by passing in a function. As of jQuery 1.4, the function is passed two arguments, the current element's index and its current value: < / p >
< pre > $('input:text.items').val(function(index, value) {
return value + ' ' + this.className;
});
< / pre >
< p > This example appends the string " items" to the text inputs' values.< / p >
< / div >
< h3 > Examples:< / h3 >
< div id = "entry-examples" class = "entry-examples" >
< div id = "example-0" >
< h4 > Example: < span class = "desc" > Set the value of an input box.< / span >
< / h4 >
< pre > < code class = "example demo-code" > < !DOCTYPE html>
< html>
< head>
< style>
button { margin:4px; cursor:pointer; }
input { margin:4px; color:blue; }
< /style>
< script src="http://code.jquery.com/jquery-latest.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> < / code > < / pre >
< h4 > Demo:< / h4 >
< div class = "demo code-demo" > < / div >
< / div >
< div id = "example-1" >
< h4 > Example: < span class = "desc" > Set a single select and a multiple select .< / span >
< / h4 >
< pre > < code class = "example demo-code" > < !DOCTYPE html>
< html>
< head>
< style>
body { color:blue; }
< /style>
< script src="http://code.jquery.com/jquery-latest.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> < / code > < / pre >
< h4 > Demo:< / h4 >
< div class = "demo code-demo" > < / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / body > < / html >
