下記のソースは、一方のコンボボックスの選択項目に応じて、もう一方のコンボボックスの内容が動的に変化する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にジャンプしたり、フォームデータを持ち回すなど、さまざまな応用も可能だ。
興味をお持ちになったら、ぜひチャレンジしていただきたい。