加载中...

val()


概述    .val()

返回值:String

描述:获取匹配的元素集合中第一个元素的当前值。

  • V : 1.0.val()

    • 这个方法不接受任何参数。

.val()方法主要用于获取表单元素的值,如input, selecttextarea。当在一个空集合上调用,它返回undefined

当该集合中第一个元素是一个select-multiple(即,select元素设置了multiple属性),.val()返回一个包含每个选择项值的数组。在jQuery 3.0中, 如果没有选项被选中,它将返回一个空数组;在jQuery 3.0之前的版本中, 它将返回null

对于选择框(select),复选框(checkbox)和单选按钮(radio button),您也可以使用:selected:checked选择器来获取值,例如:

// 在下拉列表中获取所选选项的值
$( "select#foo option:checked" ).val();
 
// 直接从下拉列表中选择值
$( "select#foo" ).val();
 
// 从复选框获取选中值
$( "input[type=checkbox][name=bar]:checked" ).val();
 
// 从一组单选按钮获取选中值
$( "input[type=radio][name=baz]:checked" ).val();

注意: 通过 .val() 方法从 <textarea> 元素中获取的值是不含有回车(\r)字符的。但是如果该值是通过 XHR 传递给服务器的,回车(\r)字符会被保留(或者是被浏览器添加的,但是在原始数据中并不包含回车(\r))。可以使用下面的 valHook 方法解决这个问题:

$.valHooks.textarea = {
  get: function( elem ) {
    return elem.value.replace( /\r?\n/g, "\r\n" );
  } };

示例

实例

从单一列表框和复选列表中取值,并显示选中的值。

<!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-1.10.2.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" ).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-1.10.2.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>

运行一下

概述    .val( value )

返回值:jQuery

描述:设置匹配的元素集合中每个元素的值。

  • V : 1.0.val( value )

    • value
      类型: String or Number or Array
      一个文本字符串,一个数字,或一个以字符串形式的数组来设定每个匹配元素的值。
  • V : 1.4.val( function )

    • function
      类型: Function( Integer index, String value ) => String
      一个用来返回设置值的函数。this 指向当前元素。接收的集合中元素的索引位置和原来的值作为参数。

此方法通常用于设置表单字段的值。

val() 允许你传递一个元素值的数组。当使用在包含像<input type="checkbox">, <input type="radio">, 和<select>中的 <option>元素的jQuery对象上的时候是非常有用的。在这种情况下,inputoptionvalue与数组元素相匹配的情况下将被选中(checked)或选定(selected),而那些与数组元素值不匹配的value是未选中(unchecked)或未被选(unselected),这取决于元素类型。对于 <input type="radio"> 属于一个单选按钮组 ,还有<select>的其他元素都将被取消选中。

使用这个方法(或使用原生的value属性(property))设置值,不会触发change事件。为此,相关的事件处理程序不会被执行。如果要执行它们,你应该在设置值之后调用 .trigger( "change" )

.val() 方法允许通过一个函数来设置这个值。 从 jQuery 1.4 开始, 这个函数通过两个参数,当前元素的所引值和它当前的值:

$('input:text.items').val(function( index, value ) {
  return value + ' ' + this.className;
});

这个示例将字符串" items" 附给文本框。

示例

参数array 实例

设定一个select和一个多选的select的值

HTML 代码:
<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" value="check1"/> check1
<input type="checkbox" value="check2"/> check2
<input type="radio" value="radio1"/> radio1
<input type="radio" value="radio2"/> radio2
jQuery 代码:
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);

实例

点击按钮时,在文本框中显示按钮的值。

<!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-1.10.2.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>
运行一下

实例

将函数作为参数设置文本框的值。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>val demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.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-1.10.2.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>
运行一下


还没有评论.