DOMによるフォーム・コントロールの操作 (5/6)
作成:2010-04-02 15:43
更新:2010-05-11 18:47
更新:2010-05-11 18:47
■複数選択可能な<select>の処理
ラジオボタンと同様に、「複数の項目から選ぶ」という操作を行うのが選択リストのコントロールです。<select>タグで作成されるものですね。これも扱いには注意が必要です。この<select>には、「multiple」という属性があります。これにより、複数項目を選択可能にすることができます。
複数選択を許可せず、１つの項目しか選択できない場合、<select>の利用は非常に単純です。単に<select>のDOMオブジェクトからvalueプロパティで選択された値を取り出すだけです。が、複数項目が選択可能であった場合、「valueを調べれば終わり」とはいきません。何しろ、いくつの項目が選択されているかもわからないのですから。この場合、valueでは、複数選択されている項目の最初の１つしか得られません。
では、どうするか？ <select>のDOMオブジェクトには「options」というプロパティがあります。これは、<select>に用意されている<option>タグのDOMオブジェクトをひとまとめにしてあるプロパティです。
ここから順に<option>のオブジェクトを取り出し、その「selected」プロパティをチェックすれば、その項目が選択されているかどうかわかります。selectedは、選択状態を真偽値で示すプロパティです。
下のリスト部分に、簡単なサンプルをあげておきます。ここでは、いくつかの項目を用意しておき、それを選択すると、選択した項目がすべて上に表示されます。<select>のオブジェクトからoptionsプロパティの値を取り出し、それをforで繰り返し処理していますね。
このforも、やはりfor inは使いません。基本的に、複数のDOMオブジェクトをまとめて扱うプロパティは、配列ではなくHTMLCollectionというオブジェクトとして値を管理するので、すべてfor inは使えない、と考えておきましょう。
なお、ここでは<select>タグに、「onchange="doAction();"」というようにしてイベントの設定を行っています。この「onchange」は、「コントロールの値が変更されたときに発生するイベント」なのです。つまり、<select>で何かを選択すると、その瞬間にこのイベントが発生します。
<select>の場合onclickよりもこちらのほうが使用イベントとして自然でしょう。このonchangeは、この他にもラジオボタンや入力フィールド関係などでも用意されています。
複数選択を許可せず、１つの項目しか選択できない場合、<select>の利用は非常に単純です。単に<select>のDOMオブジェクトからvalueプロパティで選択された値を取り出すだけです。が、複数項目が選択可能であった場合、「valueを調べれば終わり」とはいきません。何しろ、いくつの項目が選択されているかもわからないのですから。この場合、valueでは、複数選択されている項目の最初の１つしか得られません。
では、どうするか？ <select>のDOMオブジェクトには「options」というプロパティがあります。これは、<select>に用意されている<option>タグのDOMオブジェクトをひとまとめにしてあるプロパティです。
ここから順に<option>のオブジェクトを取り出し、その「selected」プロパティをチェックすれば、その項目が選択されているかどうかわかります。selectedは、選択状態を真偽値で示すプロパティです。
○複数項目選択の利用例○
下のリスト部分に、簡単なサンプルをあげておきます。ここでは、いくつかの項目を用意しておき、それを選択すると、選択した項目がすべて上に表示されます。<select>のオブジェクトからoptionsプロパティの値を取り出し、それをforで繰り返し処理していますね。
このforも、やはりfor inは使いません。基本的に、複数のDOMオブジェクトをまとめて扱うプロパティは、配列ではなくHTMLCollectionというオブジェクトとして値を管理するので、すべてfor inは使えない、と考えておきましょう。
○onselectedイベント○
なお、ここでは<select>タグに、「onchange="doAction();"」というようにしてイベントの設定を行っています。この「onchange」は、「コントロールの値が変更されたときに発生するイベント」なのです。つまり、<select>で何かを選択すると、その瞬間にこのイベントが発生します。
<select>の場合onclickよりもこちらのほうが使用イベントとして自然でしょう。このonchangeは、この他にもラジオボタンや入力フィールド関係などでも用意されています。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<html>
<head>
<script type="text/javascript">
<!--
function doAction(){
var select = document.getElementById("select1");
var options = select.options;
var result = "";
for(var i = 0;i < options.length;i++){
var option = options[i];
if (option.selected){
result += '"' + option.value + '" ';
}
}
var message = document.getElementById("message");
message.innerHTML = result;
}
//-->
</script>
</head>
<body>
<H1>TEST.</H1>
<div id="message">OSを選択：</div>
<form onsubmit="return false;">
<select id="select1" size="5" multiple="multiple"
onchange="doAction();">
<option value="Windows">Windows</option>
<option value="Mac OS">Mac OS</option>
<option value="Linux">Linux</option>
<option value="Android">Android</option>
<option value="iphone">iphone</option>
</select>
</form>
</body>
</html>
※関連コンテンツ
「初心者のためのJavaScriptプログラミング入門」に戻る