jQuery change()事件：捕获表单元素的值变化-代码号

change() 是表单交互中使用频率很高的一个事件方法。它专门用于检测表单元素的值是否发生了变化。当用户在输入框里修改了内容然后离开、下拉菜单切换了选项、复选框或单选框改变了选中状态，change 事件都会被触发。

这个事件有一个需要特别注意的行为差异：不同元素类型触发 change 事件的时机不同。

对于 <select> 下拉菜单、复选框和单选按钮：用户用鼠标做出选择的瞬间，事件立刻触发。
对于 <input type="text"> 和 <textarea> 等文本输入类元素：事件不会在每次按键时触发，而是等到元素失去焦点时才触发。

这个差异在开发中影响很大。如果要对输入框做实时监测（比如每打一个字都检查），change 做不到，需要用 keyup 或 input 事件。change 更适合“填完了离开时检查”这种场景。

语法形式

触发 change 事件：

$(selector).change()

程序化地触发 change 事件，执行已绑定的处理函数。在一些需要手动通知状态变更的场景里会用上。

绑定 change 事件：

$(selector).change(function(){
    // 元素值发生变化时执行的代码
})

给表单元素绑定值变化的回调函数，是 change() 最常用的写法。

基础示例：下拉菜单选择后显示结果

下面这个例子用下拉菜单演示 change() 的基本用法。用户选择一个选项后，页面上立刻显示选中的内容。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>change() 下拉菜单示例</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <style>
        .result {
            margin-top: 10px;
            color: #1a5276;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <label for="courseSelect">请选择学习课程：</label>
    <select id="courseSelect" name="course">
        <option>jQuery 基础教程</option>
        <option selected="selected">JavaScript 入门</option>
        <option>HTML 与 CSS 布局</option>
        <option>前端框架实践</option>
        <option>数据库入门</option>
    </select>
    <div class="result" id="selectionResult"></div>

    <script>
        $("select").change(function(){
            document.getElementById("selectionResult").innerHTML = "你选择了：" + document.getElementById("courseSelect").value;
        });
    </script>
</body>
</html>

下拉菜单默认选中“JavaScript 入门”，切换选项时下方文字立即更新。对于 <select> 元素，change 的触发是实时的，不需要等失去焦点，这是它和文本输入框的重要区别。

进阶示例：多选下拉菜单

下面这个例子更进一步，使用 multiple 属性让下拉菜单支持多选。按住 Ctrl 键可以同时选中多个选项，change 事件触发后遍历所有选中项拼成提示文字。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>change() 多选下拉菜单示例</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <style>
        .multi-result {
            margin-top: 10px;
            color: #c0392b;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>按住 Ctrl 键可多选：</p>
    <select name="skills" multiple="multiple" id="skillsSelect">
        <option>jQuery</option>
        <option selected="selected">JavaScript</option>
        <option>HTML</option>
        <option selected="selected">CSS</option>
        <option>PHP</option>
        <option>Python</option>
    </select>
    <div class="multi-result" id="multiResult"></div>

    <script>
        $("select")
            .change(function(){
                var selectedText = "";
                $("select option:selected").each(function(){
                    selectedText += $(this).text() + "  ";
                });
                $("div.multi-result").text("已选技能：" + selectedText);
            })
            .change(); // 页面加载后立即触发一次，显示默认选中内容
    </script>
</body>
</html>

这里有两个值得注意的写法：

末尾的 .change() 链式调用是在页面加载完成后立刻触发一次 change 事件，让显示区域展示默认选中的内容。这是一种常见的初始化技巧，避免页面刚打开时空空荡荡。
$("select option:selected") 选择器专门匹配所有被选中的 <option>，用 each() 遍历拼接字符串。这个组合在多选菜单、复选框组等场景里经常用到。

change 和 input 事件的区别

前面提到文本输入框的 change 事件在失去焦点时才触发。如果需要在用户每输入一个字符时就响应，应该用 input 事件（或者 keyup 事件）：

// change：离开输入框时才触发
$("#myInput").change(function(){
    console.log("值已改变且失去焦点");
});

// input：每次输入都触发
$("#myInput").on("input", function(){
    console.log("输入内容正在变化");
});

我的习惯是，表单校验放在 change 或 blur 里（用户输入完一段落再检查），搜索框的实时联想放在 input 里（每敲一个字都发请求）。两种事件各有适用场景，根据需求选择能让交互体验更自然。

本节课程知识要点

change() 事件在表单元素的值发生改变时触发，适用于 <input>、<textarea> 和 <select>。
触发时机因元素类型而异：下拉菜单、复选框、单选按钮立即触发；文本输入框在失去焦点时才触发。
多选下拉菜单配合 $("select option:selected") 选择器和 each() 遍历可以获取所有选中项。
页面初始化时调用 .change() 可触发默认值的显示逻辑，避免页面空白。
如果需要实时监测输入，用 input 事件而非 change，两者触发时机不同。

change() 是表单数据监听的核心事件之一。它的触发机制虽然因元素类型而有差异，但理解清楚这个差异反而能让代码逻辑更精准——该实时响应的用 input，该填完再检查的用 change。配合下拉菜单、复选框组和多选列表等常用表单组件，change() 能覆盖大部分表单交互的监听需求。表单事件的几个方法（focus、blur、change、select）掌握到这里，基本的前端表单交互就能写得比较流畅了。

本文标签：

jQuery change()事件：捕获表单元素的值变化

语法形式

基础示例：下拉菜单选择后显示结果

进阶示例：多选下拉菜单

change 和 input 事件的区别

本节课程知识要点

感谢您的认可和支持