val メソッド
メソッド val は要素の現在の値を
取得および変更することができます。
構文
セット内の最初の要素の現在の値を取得するには 以下のようにします:
$(セレクタ).val();
メソッド val は主に、
input、
select、
textarea などの
フォーム要素の値を取得するために使用されます。
空のコレクションで呼び出された場合、undefined を返します。
属性 multiple が設定された select を扱う場合、
このメソッドは選択された各 option の値の配列を返します。
一つも選択されていない場合は空の配列が返されます。
セット内の各要素に値を設定するには以下のようにします。
パラメータとして文字列、配列、または数値を渡すことができます:
$(セレクタ).val(値);
セット内の各要素に関数を適用します。 関数の最初のパラメータはセット内の現在のインデックス、 二番目のパラメータはその現在の値です:
$(セレクタ).val(属性名, function(セット内のインデックス, 現在の値));
例
次の例では、入力フィールドに入力された値を取得し、 その下の段落に表示してみましょう:
<input type="text" value="text">
<p></p>
p {
color: green;
margin: 8px;
}
$('input').keyup(function() {
let value = $(this).val();
$('p').text(value);
}).keyup();
例
次に、val メソッドを使って、
クリックしたボタンのテキストを下にある入力フィールドに
設定してみましょう:
<div>
<button>one</button>
<button>two</button>
<button>three</button>
<button>four</button>
</div>
<input type="text" value="click buttons">
button {
margin: 4px;
cursor: pointer;
}
input {
margin: 4px;
color: green;
}
$('button').click(function() {
let text = $(this).text();
$('input').val(text);
});