jQuery select和change事件
上节教程中我们已经学过，jQuery 常用的表单事件有 3 种，focus 和 blur 事件上节已有介绍，本节教程就来介绍 select 和 change 事件。
jQuery select事件
在 jQuery 中，当我们选中“单行文本框”或“多行文本框”中的内容时，就会触发 select 事件。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("#txt1").select(function(){
alert("你选中了单行文本框中的内容")
})
$("#txt2").select(function () {
alert("你选中了多行文本框中的内容")
})
})
</script>
</head>
<body>
<input id="txt1" type="text" value="城东书院，给你初恋般的感觉"/><br />
<textarea id="txt2" cols="20" rows="5">城东书院，给你初恋般的感觉</textarea>
</body>
</html>
预览效果如图 1 所示。
图 1：select 事件的效果
当我们选中单行文本框或多行文本框中的内容时，都会弹出相应的对话框。select 事件在实际开发中用得极少，我们了解一下即可，不需要深入。
再回到实际开发中，我们在使用搜索框的时候，每次点击搜索框，它就自动帮我们把文本框内的文本全选中了（大家先去看看百度搜索是不是这样的），这个效果又是怎么实现的呢？其实这用到的也是 select() 方法。
举例：全选文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("#search").click(function(){
$(this).select();
})
})
</script>
</head>
<body>
<input id="search" type="text" value="百度一下，你就知道" />
</body>
</html>
默认情况下，预览效果如图 2 所示。
图 2：默认时的效果
当我们点击文本框时，预览效果如图 3 所示。
图 3：点击文本框时的效果
与 focus() 一样，select() 不仅可以作为一个事件，还可以作为一个方法。
jQuery change事件
在 jQuery 中，change 事件常用于“具有多个选项的表单元素”中 change 事件在以下 3 种情况下被触发：
- 单选框选择某一项时触发；
- 复选框选择某一项时触发；
- 下拉菜单选择某一项时触发。
举例：单选框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$('input[type="radio"]').change(function(){
var bool = $(this).prop("checked");
if(bool){
$("p").text("你选择的是：" + $(this).val());
}
})
})
</script>
</head>
<body>
<div>
<label><input type="radio" name="fruit" value="苹果" />苹果</label>
<label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
<label><input type="radio" name="fruit" value="西瓜" />西瓜</label>
</div>
<p></p>
</body>
</html>
默认情况下，预览效果如图 4 所示。
图 4 默认效果
当我们选中任意一项时，就会立即显示出结果来，预览效果如图 5 所示。
图 5：选中时的效果
$('input[type="radio"]')表示选取所有单选框，这是一种属性选择器，之前我们已经接触过了。$(this).prop("checked")表示获取单选框 checked 属性的取值。
我们之前学过对于表单元素的 checked、selected、disabled 这些属性，我们使用 attr() 方法是没法获取的，必须使用 prop() 方法来获取。
举例：复选框的全选与反选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("#selectAll").change(function(){
var bool = $(this).prop("checked");
if(bool){
$(".fruit").prop("checked","checked");
}else{
$(".fruit").removeProp("checked");
}
})
})
</script>
</head>
<body>
<div>
<p><label><input id="selectAll" type="checkbox"/>全选/反选：</label></p>
<label><input type="checkbox" class="fruit" value="苹果" />苹果</label>
<label><input type="checkbox" class="fruit" value="香蕉" />香蕉</label>
<label><input type="checkbox" class="fruit" value="西瓜" />西瓜</label>
</div>
</body>
</html>
预览效果如图 6 所示。
图 6：复选框全选/反选的效果
当【全选】复选框被选中时，下面所有的复选框就会被选中。再次点击【全选】按钮，此时下面所有的复选框就会被取消选中。
哪个元素在“搞事（触发事件）”，$(this)就是哪个。后面经常会碰到，我们一定要清楚这一点。
举例：下拉列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("select").change(function () {
var link = $(":selected").val();
window.open(link);
})
})
</script>
</head>
<body>
<select>
<option value="http://www.cdsy.xyz/">城东书院</option>
<option value="https://www.92python.com/">Python教程网</option>
<option value="https://www.cpp100.com">C++教程网</option>
</select>
</body>
</html>
预览效果如图 7 所示。
图 7:下拉列表的效果
当我们选择下拉列表的某一项时，就会触发 change 事件，然后在新的窗口打开对应的页面。下拉菜单这种效果还是比较常见的，我们可以了解一下。
$(":selected").val()表示选取被选中的下拉菜单的选项（即被选中的 option 元素），然后获取该选项的 value 值。其中，$(":selected")是一个“表单属性”伪类选择器，我们在之前的表单属性’伪类选择器”这一节已经详细介绍过了。
湘公网安备 43102202000103号