本文原文链接：https://blog.csdn.net/xzk9381/article/details/111985447
jQuery 中可以使用 val() 方法处理表单元素的值，例如 input、select 和 textarea：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function (){
// 获取和设置 input 中的 value
console.log($('#myinput').val());
$('#myinput').val("input测试完成");
// 获取和设置 textarea 中的 value
console.log($('#mytextarea').val());
$('#mytextarea').val("textarea 测试完成");
// 只能用来获取 select 中的 value，不能修改。获取到的 value 是当前被选中的 option 对应的 value
console.log($('#myselect').val());
})
</script>
</head>
<body>
<input type="button" value="input测试" id="myinput">
<textarea id="mytextarea">textarea 测试</textarea>
<select id="myselect">
<option>选择1</option>
<option>选择2</option>
<option selected="selected">选择3</option>
<option>选择4</option>
</select>
</body>
</html>
其实对于 input 和 textarea 来说，使用 jQuery 获取值和原生的方法相比没有特别大的优势。尤其是 textarea ，除了使用 val() 方法，还可以使用 html() 和 text() 方法获取和修改值。
优势最明显的是对于 select 标签的修改，例如上面的代码，如果使用原生的方式获取当前被选中的 option 值，需要使用如下方式：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
onload = function (){
var index = myselect.selectedIndex;
console.log(index);
console.log(myselect.options[index].text)
}
</script>
</head>
<body>
<select id="myselect">
<option>选择1</option>
<option>选择2</option>
<option selected="selected">选择3</option>
<option>选择4</option>
</select>
</body>
</html>
而使用 jQuery 则可以减少很多代码。
另外还有一点需要注意的是，如果代码中有多个相同的元素，使用 val() 方法时，只会获取到第一个匹配到元素的值：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function (){
console.log($('input').val())
})
</script>
</head>
<body>
<input type="button" value="input测试1" id="myinput">
<input type="button" value="input测试2" id="myinput">
<input type="button" value="input测试3" id="myinput">
</body>
</html>
如果是 select 标签，那么也只会匹配到第一个 select 标签中的第一个被选中（selected）的 option。
本文原文链接：https://blog.csdn.net/xzk9381/article/details/111985447