jQuery change() jQuerychange()|jQuery

本文概述

jQuery change()事件的参数
jQuery change()事件的示例

更改元素的值时, 将发生jQuery change事件。它仅适用于表单字段。当发生change事件时, change()方法将附加一个函数来运行。
注意：此事件仅限于< input> 元素, < textarea> 框和< select> 元素。

对于选择框, 复选框和单选按钮：当用户使用鼠标进行选择时, 将立即触发该事件。
对于其他元素类型：该事件在字段失去焦点时发生。

句法：

$(selector).change()

它触发选定元素的更改事件。

$(selector).change(function)

它将一个功能添加到更改事件。
jQuery change()事件的参数

参数	描述
Function	它是一个可选参数。用于指定所选元素发生更改事件时要运行的功能。

jQuery change()事件的示例让我们以一个示例来演示jQuery change()事件。

< !DOCTYPE html> < html lang="en"> < head> < meta charset="utf-8"> < title> change demo< /title> < style> div { color: red; } < /style> < script src="http://img.readke.com/220429/1K043Db-0.jpg"> < /script> < /head> < body> < select id="se" name="actors" > < option> Uthappa< /option> < option selected="selected"> Kattapa< /option> < option> Veerappa< /option> < option> Bahubali< /option> < option> Bhallal Dev< /option> < option> Awantika< /option> < /select> < div id="loc"> < /div> < script> $( "select" ) .change(function () { document.getElementById("loc").innerHTML="You selected: "+document.getElementById("se").value; }); < /script> < /body> < /html>

立即测试
输出：
乌萨帕
Kattapa
维拉帕
巴胡巴利
Bhallal开发
阿旺蒂卡
让我们看一下jQuery更改事件的另一个示例, 其中提供了使用ctrl键选择多个数据的选项。

< !DOCTYPE html> < html lang="en"> < head> < meta charset="utf-8"> < title> change demo< /title> < style> div { color: red; } < /style> < script src="http://img.readke.com/220429/1K043Db-0.jpg"> < /script> < /head> < body> < select name="Employees" multiple="multiple"> < option> Uthappa< /option> < option selected="selected"> Kattapa< /option> < option> Veerappa< /option> < option selected="selected"> Bahubali< /option> < option> Bhallal Dev< /option> < option> Awantika< /option> < /select> < div> < /div> < script> $( "select" ) .change(function () { var str = ""; $( "select option:selected" ).each(function() { str += $( this ).text() + " "; }); $( "div" ).text( str ); }) .change(); < /script> < /body> < /html>

立即测试
输出：
乌萨帕
Kattapa
维拉帕
巴胡巴利
Bhallal开发
【jQuery change()】阿旺蒂卡