【jQuery】valメソッドとは

valメソッドとは

valメソッドは、フォーム要素の値を取得したり設定したりするためのメソッドです。具体的には、テキスト入力フィールド、テキストエリア、セレクトボックス、チェックボックス、ラジオボタンなど、フォーム要素の値を取得または設定するのに使用されます。

セレクトボックスの入力値

selectタグを用いると選択肢式のセレクトボックスを作ることができます。selectタグとoptionタグからなり、各optionタグが選択肢になります。下図のように、selectタグはvalメソッドによって、選択中の値（optionタグのvalue属性の値）を取得できます。

<!-- html -->
<form>
    <div>性別</div>
    <select id="gender">
        <option value="male">男</option>     //セレクトボックスの選択肢
        <option value="female">女</option>   //セレクトボックスの選択肢
    </select>
</form>

//js
var gender = $('#gender').val();
//select要素の選択されているoptionのvalue属性を取得

入力欄への自動入力

valメソッドは値を取得することもできますが、引数に値を指定することでフォームに値をセットすることもできます。例えば、inputタグへの値のセットを行う場合は以下のように記述すると「山田太郎」という値がセットできます。

<!-- html -->
<form>
    <div>名前：</div>
    <input id="name" type="text">
</form>

//js
$('#name').val('山田太郎');
//input要素（text内）に「山田太郎」という値をセット

セレクトボックスの自動入力

selectタグもvalメソッドを用いて自動で選択させることができます。先ほどのinputタグとの違いは、selectタグの場合選択肢が限定されているということです。以下のように記述するとセレクトボックスの中に「女」という値が自動入力されます。

<!-- html -->
<form>
    <div>性別：</div>
    <select id="gender">
        <option value="male">男</option>     //セレクトボックスの選択肢
        <option value="female">女</option>   //セレクトボックスの選択肢
    </select>
</form>

//js
var gender = $('#gender').val(female);
//select要素のoptionのvalue属性がfemaleのものを選択させる