連載
» 2009年11月13日 00時00分 公開

連載:jQuery逆引きリファレンス:第2回 属性&コンテンツ編 (19/19)

[山田祥寛(http://www.wings.msn.to/),著]
前のページへ 1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|18|19       



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 テキストボックスや選択ボックス、ラジオボタンなど、フォーム要素の値を取得/設定するには、valメソッドを使います。

 valメソッドは、引数valを指定した場合には要素セットに含まれる全フォーム要素の値を設定し、引数valを省略した場合には、要素セットに含まれる先頭フォーム要素の値を取得します。

 以下は、あらかじめ用意されたテキストボックス、選択ボックス、リストボックスにそれぞれ値を設定し、その後で、それぞれの値をメッセージ表示する例です。

<script type="text/javascript">

$(function() {

  // フォーム要素に値を設定
  $('#name').val('ASP.NET');
  $('#food').val('orange');
  $('#music').val(['jazz', 'classic']); (1)

  // フォーム要素の値を取得
  window.alert(
    'name:' + $('#name').val() + '\n' +
    'food:' + $('#food').val() + '\n' +
    'music:' + $('#music').val() (2)
  );
});

</script>

……中略……

<input type="text" id="name" />

<select id="food">
  <option value="apple">りんご</option>
  <option value="orange">みかん</option>
  <option value="strawberry">いちご</option>
</select>

<select id="music" multiple="multiple">
  <option value="jazz">ジャズ</option>
  <option value="rock">ロック</option>
  <option value="classic">クラシック</option>
</select>

リスト046 フォーム要素の値を取得/設定(Val.html)
このHTMLを実際にブラウザで開く


ブラウザで開く

リスト046の実行結果

 リストボックスのように複数選択可能なフォーム要素では、val(val)メソッドにも配列リテラル([要素,……])の形式で値を渡します(リスト046の(1))。

 また、val()メソッドも複数の値が選択されている場合には、配列として要素の値を返す点(リスト046の(2) )に注目してください。

「連載:jQuery逆引きリファレンス」のインデックス

連載:jQuery逆引きリファレンス

前のページへ 1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|18|19       

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。