mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-24 01:40:25 +00:00
223 lines
No EOL
7.7 KiB
HTML
223 lines
No EOL
7.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||
<div class="ui-page">
|
||
<div class="ui-header">
|
||
<h1>.val()</h1>
|
||
|
||
</div>
|
||
|
||
<fieldset class="toc">
|
||
<legend>Contents:</legend>
|
||
<ul class="toc-list">
|
||
<li>
|
||
<a href="#val1">val() </a><ul><li>.val()
|
||
</li></ul>
|
||
</li>
|
||
<li>
|
||
<a href="#val2">val( value ) </a><ul>
|
||
<li>.val( value )
|
||
</li>
|
||
<li>.val( function(index, value) )
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</fieldset>
|
||
<div class="entry method" id="val1">
|
||
<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>
|
||
<div class="ui-content ui-body ui-body-c" id="val2">
|
||
<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> |