<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
p {
color: red;
margin: 4px;
}
b {
color: blue;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h3>.val()</h3>
<select id="single">
<option>慕课网</option>
<option>博客园</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">imocc</option>
<option>慕课网</option>
<option selected="selected">博客园</option>
</select>
<input type="text" value="click a button" />
<p></p>
<script type="text/javascript">
//单个select，返回第一个
$("p").text( $("#single").val() )
</script>
<script type="text/javascript">
//多个select被选择，返回["imocc", "博客园"]
$("p").text( $("#multiple").val())
</script>
<script type="text/javascript">
//选择一个表单，修改value的值
$("input[type='text']").val('修改表单的字段')
</script>
</body>
</html>因为段落是预先设置好的，第33行只有一个P标签，说明文本只有一段，只能是替换，$("p").text( $("#single").val() )将内容插入到p标签指定的段落中。可以添加段落显示。
<p></p>
<p></p>
<script type="text/javascript">
//单个select，返回第一个
$("p:first").text( $("#single").val())
</script>
<script type="text/javascript">
//多个select被选择，返回["imocc", "博客园"]
$("p:last").text( $("#multiple").val())
</script>
p标签如果有两组，后面才会有显示
因为$("p").text( $("#multiple").val()) 把第一个内容替换掉了