js STUDIO

.change()

要素のchangeイベントに実行させたい関数を指定します。

このメソッドは、1つ目と2つ目は.bind('change', handler)への、3つ目は.trigger('change')への ショートカットです。

changeは指定要素の値が変更された際に発生するイベントで、 <input>、<textarea>、<select>要素専用のイベントです。 また、セレクトボックス、チェックボックス、ラジオボタンは値が変更された際に即座にイベント発生とみなされますが、 他の要素はフォーカスが外れるまで、イベント発生とはみなされません。

.change( handler(eventObject) ) 1.0追加

戻り値:jQuery

要素のchangeイベントに実行させたい関数を指定します。

引数 説明
handler(eventObject) イベントが発生した際に、実行したい処理を関数として指定します。 
$("input[type='text']").change( function() {
  // $(this).val() で値を参照することができます。
});

.change( [eventData], handler(eventObject) ) 1.4.3追加

戻り値:jQuery

要素のchangeイベントに実行させたい関数を指定します。

引数 説明
[eventData] マップ値を指定することで、データをイベントハンドラーに渡すことが出来ます。
handler(eventObject) イベントが発生した際に、実行したい処理を関数として指定します。

.change() 1.0追加

戻り値:jQuery

changeイベントを発生させます。

サンプル

テキストフィールドの値を変更してフォーカスを外した場合と、 セレクトボックスの選択値を変更した場合に、イベントが発生します。
また、IDがotherのDIV要素のクリックでも、同じようにアラートが表示されます。 

<form>
  <input class="target" type="text" value="Field 1" />
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<div id="other">
  changeイベントを発生！
</div>

$('.target').change(function() {
  alert('changeイベントが発生しました。');
});

//故意にchangeイベントを発生させます。
$('#other').click(function() {
  $('.target').change();
});

<!DOCTYPE html>
<html>
<head>
  <style>

  div { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <select name="sweets" multiple="multiple">
    <option>チョコレート</option>
    <option selected="selected">キャンディ</option>
    <option>タフィー</option>
    <option selected="selected">キャラメル</option>
    <option>ファッジ</option>
    <option>クッキー</option>
  </select>
  <div></div>
  <p>
  ※タフィーとファッジはキャンディの一種。
  </p>
<script>
    $("select").change(function () {
      var str = "";
      $("select option:selected").each(function () {
            str += $(this).text() + " ";
          });
      $("div").text(str);
    })
    .change();
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM