.val() | jQuery API Documentation

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

乐观的西瓜 · .val() | jQuery API ...· 昨天 ·

犯傻的蟠桃 · CAST 和 CONVERT ...· 9 小时前 ·

拉风的牛肉面 · 合肥庐阳区2024年中小学学区划分方案公布！ ...· 10 月前 ·

俊秀的冲锋衣 · .NET ...· 11 月前 ·

成熟的西装 · 某不懂日文的坂道宅选择音乐流媒体的过程 - ...· 11 月前 ·

温文尔雅的豆腐 · vue ...· 1 年前 ·

帅气的钥匙扣 · 【新时代新气象 ...· 1 年前 ·

Get the current value of the first element in the set of matched elements or set the value of every matched element.

When the first element in the collection is a select-multiple (i.e., a select element with the multiple attribute set), .val() returns an array containing the value of each selected option. As of jQuery 3.0 , if no options are selected, it returns an empty array; prior to jQuery 3.0 , it returns null .

For selects, checkboxes and radio buttons, you can use :checked to select the right elements. For example:

// Get the value from the selected option in a dropdown
$( "select#foo option:checked" ).val();
 
// Get the value from a dropdown select directly
$( "select#foo" ).val();
 
// Get the value from a checked checkbox
$( "input[type=checkbox][name=bar]:checked" ).val();
 
// Get the value from a set of radio buttons
$( "input[type=radio][name=baz]:checked" ).val();

Note: At present, using .val() on <textarea> elements strips carriage return characters from the browser-reported value. When this value is sent to the server via XHR, however, carriage returns are preserved (or added by browsers which do not include them in the raw value). A workaround for this issue can be achieved using a valHook as follows:

<!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="https://code.jquery.com/jquery-3.7.1.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() || [];
  // When using jQuery 3:
  // var multipleValues = $( "#multiple" ).val();
  $( "p" ).html( "<b>Single:</b> " + singleValues +
    " <b>Multiple:</b> " + multipleValues.join( ", " ) );
}
 
$( "select" ).on( "change", displayVals );
displayVals();
</script>
 
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>val demo</title>
  <style>
  p {
    color: blue;
    margin: 8px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
</head>
<body>
 
<input type="text" value="some text">
<p></p>
 
<script>
$( "input" )
  .on( "keyup", function() {
    var value = $( this ).val();
    $( "p" ).text( value );
  } )
  .trigger( "keyup" );
</script>
 
</body>
</html>

This method is typically used to set the values of form fields.

val() allows you to pass an array of element values. This is useful when working on a jQuery object containing elements like <input type="checkbox"> , <input type="radio"> , and <option> s inside of a <select> . In this case, the input s and the option s having a value that matches one of the elements of the array will be checked or selected while those having a value that doesn't match one of the elements of the array will be unchecked or unselected, depending on the type. In the case of <input type="radio"> s that are part of a radio group and <select> s, any previously selected element will be deselected.

Setting values using this method (or using the native value property) does not cause the dispatch of the change event. For this reason, the relevant event handlers will not be executed. If you want to execute them, you should call .trigger( "change" ) after setting the value.

The .val() method allows setting 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:

This example removes leading and trailing whitespace from the values of text inputs with a "tags" class.

Examples:

Example 1

Set the value of an input box.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>val demo</title>
  <style>
  button {
    margin: 4px;
    cursor: pointer;
  }
  input {
    margin: 4px;
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
</head>
<body>
 
<div>
  <button>Feed</button>
  <button>the</button>
  <button>Input</button>
</div>
<input type="text" value="click a button">
 
<script>
$( "button" ).on( "click", function() {
  var text = $( this ).text();
  $( "input" ).val( text );
});
</script>
 
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>val demo</title>
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
</head>
<body>
 
<p>Type something and then click or tab out of the input.</p>
<input type="text" value="type something">
 
<script>
$( "input" ).on( "blur", function() {
  $( this ).val(function( i, val ) {
    return val.toUpperCase();
  });
});
</script>
 
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>val demo</title>
  <style>
  body {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.1.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>

Web hosting by Digital Ocean | CDN by Fastly | Powered by WordPress

Contents: (adsbygoogle = window.adsbygoogle || []).push({});

Contents: