HTTPサーバーとWeb開発

16. 動的なコンボボックスの作成

下記のソースは、一方のコンボボックスの選択項目に応じて、もう一方のコンボボックスの内容が動的に変化するJavaScriptのサンプルだ。
iSeries400に蓄積してきたデータをコンボボックスにバインドするなど、システム開発の一助になれば幸いである。

サンプルソース

まずフォーム名と左右コンボボックスの名称を定義する。
サンプルでは、フォーム名を「box」、左コンボボックスを「left」、右コンボボックスを「right」としている。

左コンボボックスの項目数に応じて「if(now ==」で始まるブロックを用意する。
サンプルでは4項目なので、「if(now ==」で始まるブロックも4つある。

また「if(now == "xxx"」の"xxx"は左コンボボックスの項目のvalue値をそれぞれ指定する。

続いて右コンボボックスの配列を定義するわけだが、それぞれの項目数が必要になる。

document.box.right.options.length = N;
for(i = 0;i < N;i++)

上記"N"の部分にその数を入力する。
そして、

document.box.right.options[n].text = "●●●"

の部分で、[n]には0から始まる整数を連番で、"●●●"には任意の文字列を入力する。

左側コンボボックスの内容はBODY中

<option value="xxx">■■■</option>

の"■■■"に文字列を入力する。("xxx"は前述のvalue値)

サンプルは表示が変化するだけの単純なものだが、右コンボボックスにもvalueを持たせ、個別のURLにジャンプしたり、フォームデータを持ち回すなど、さまざまな応用も可能だ。
興味をお持ちになったら、ぜひチャレンジしていただきたい。