JavaScriptの「Form」オブジェクトと各「elements」の入力を取得する基本JavaScript標準ライブラリの使い方超入門(8)(5/5 ページ)

» 2016年11月15日 05時00分 公開
[金城俊哉]
前のページへ 1|2|3|4|5       

プルダウンリストを使ってみる

theme

プルダウンリストを配置し、項目を選択してボタンをクリックすると、どの項目が選択されたのかをダイアログで表示する。


Navigator

「まず、プルダウンリストを利用したプログラムから作成することにしましょう。プルダウンリストの場合は、選択できる項目は1つだけです。セレクトボックスは、先頭の選択値のみを返すので、select要素のvalueの値を調べれば、どの項目が選択されたのかがわかります


コード例
Driver

「例えば、name属性がfrmのフォームに配置されている、name属性areaのプルダウンリストの選択項目は、次のようにvalueプロパティで取得すればいいですね」


コード例
Driver

「では、プログラムを作成してみます」


プルダウンリストを使う(pull-down1.html)
実行結果

Memo options[インデックス]の形式でアクセスする

 「プルダウンリストを使ってみる」のプログラムでは、option要素のvalueを直接、取り出しましたが、次のようにoptions[インデックス]の形式で配列要素を指定して、valueの値を取り出すこともできます。この方法ではtextプロパティを使うことができます。次は、前出のプログラムのJavaScriptの部分を書き換えたものです。valueとtextのそれぞれの値を取得するようにしています。

options[インデックス]の形式でアクセスする(pull-down2.html)
実行結果

リストボックスを使ってみる

theme

リストボックスを配置し、選択された項目の内容をダイアログに表示する。


Navigator

「リストボックスは、lキーを押しながらクリックすることで、複数の項目を選択できます」


Driver

「ということは、選択されたすべての項目を取得するには、一工夫が必要ですね」


Navigator

「そこで今回は、複数の選択に対応できるように、for文を使ってoption要素に順番にアクセスし、選択された要素を取得するようにしましょう。lengthプロパティでOption配列の要素数を取得し、要素の数に達するまで処理を繰り返すようにしてみてください


Driver

「for文の内部では項目が選択されているかどうかをチェックしなければなりませんね」


for文で処理を繰返し、内部のif文で選択の有無をチェックする。
Navigator

if文を使いましょう。条件としては『options[i].selected』を指定し、処理中のoption要素が選択されている(selectedプロパティがtrue)場合に、textプロパティとvalueプロパティの値をアラートダイアログで表示するようにしましょう


Driver

「選択された項目のぶんだけ繰り返し、ダイアログで表示するのですね。では、作ってみます」


リストボックスで選択された項目を取得する(listbox.html)
実行結果
Driver

「(1)では、lengthプロパティでOption配列の要素数を取得し、要素の数に達するまで処理を繰り返すようにしています。続く(2)では、if文の条件として『options[i].selected』を指定し、処理中のoption要素が選択されている(selectedプロパティがtrue)場合に、textプロパティとvalueプロパティの値をアラートダイアログで表示するようにしました」


書籍紹介

JavaScript Web開発パーフェクトマスター

JavaScript Web開発パーフェクトマスター

金城俊哉著
秀和システム 3,672円

JavaScriptは、Webアプリ開発の定番言語です。本書は、JavaScriptの初学者向けにWebアプリ開発に必要なノウハウを、ボトムアップ方式で基礎から応用までやさしく解説します。

若手プログラマーが講師となって、JavaScript未体験のエンジニアに手ほどきをするというペアプロ形式で説明していくので、プログラミングスクールで1対1のレッスンを受けている感覚で読み進めていただけます。開発現場ですぐに役立つ技が満載です!

注文ページへ


前のページへ 1|2|3|4|5       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

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

メールマガジン登録

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