val メソッド

メソッド val は要素の現在の値を 取得および変更することができます。

構文

セット内の最初の要素の現在の値を取得するには 以下のようにします：

javascript$(セレクタ).val();

メソッド val は主に、 input、 select、 textarea などの フォーム要素の値を取得するために使用されます。 空のコレクションで呼び出された場合、undefined を返します。 属性 multiple が設定された select を扱う場合、 このメソッドは選択された各 option の値の配列を返します。 一つも選択されていない場合は空の配列が返されます。 セット内の各要素に値を設定するには以下のようにします。 パラメータとして文字列、配列、または数値を渡すことができます：

javascript$(セレクタ).val(値);

セット内の各要素に関数を適用します。 関数の最初のパラメータはセット内の現在のインデックス、 二番目のパラメータはその現在の値です：

javascript$(セレクタ).val(属性名, function(セット内のインデックス, 現在の値));

例

次の例では、入力フィールドに入力された値を取得し、 その下の段落に表示してみましょう：

html<input type="text" value="text">
<p></p>

cssp {
  color: green;
  margin: 8px;
}

javascript$('input').keyup(function() {
  let value = $(this).val();
  $('p').text(value);
}).keyup();

例

次に、val メソッドを使って、 クリックしたボタンのテキストを下にある入力フィールドに 設定してみましょう：

html<div>
  <button>one</button>
  <button>two</button>
  <button>three</button>
  <button>four</button>
</div>
<input type="text" value="click buttons">

cssbutton {
  margin: 4px;
  cursor: pointer;
}

input {
  margin: 4px;
  color: green;
}

javascript$('button').click(function() {
  let text = $(this).text();
  $('input').val(text);
});

関連項目