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="https://code.jquery.com/jquery-1.10.2.js"></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>

輸出：

讓我們看另一個 jQuery 更改事件示例，其中我們提供了使用 ctrl 鍵選擇多個數據的選項。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>change demo</title>
  <style>
  div {
    color:red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></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>

輸出：

相關用法

注：本文由純淨天空篩選整理自 jQuery change()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。