ホームページ > 記事 > ウェブフロントエンド > jsでの3階層連携の実装
jsでの3階層連携の実装
- 巴扎黑オリジナル
- 2016-11-25 10:50:431124ブラウズ
リンケージの実装は実際には非常に簡単ですが、いくつかの詳細は間違いやすいものです。ここでは、第 2 レベルの連携を学習した後、第 3 レベルの連携を実現するための基本的な考え方を共有したいと思います。
アイデア: 第 2 レベルのリンケージは、onchange イベントを介した第 1 レベルのリンケージと第 2 レベルのリンケージの間の接続であるため、第 3 レベルのリンケージは第 2 レベルのリンケージと第 3 レベルのリンケージの間の接続です。 （表現が分かりにくいかも） 簡単に言うと、Aイベント→トリガー→Bイベント→トリガー→Cイベントという流れが大まかです。
注: 配列とオプション値に対応する添え字の一致に特に注意してください。オプション option の各オプションの値は数値にすることもできます。値を数値で実装すると便利です。
質問の例:最初の学期 -> HTML、Java、SqlServer の基礎、C#学年—>二学期—>javascript、.Net、SqlServer Advanced、JSP
二学年—>第一学期—> Struts、ASP.NET、Ajax
2 学期 -& gt; 春、冬眠 '
: & & lt;! html lang = " en" & lt; & & gt;
& lt; m ETA charset="UTF-8"> Courses
学期
var term = document.getElementById('term')
//コースオブジェクトを取得する
var course = document.getElementById('もちろんです');// CHANGE1 (OBJ1) 関数を作成します。パラメータ OBJ1 は、学年を取得する Option オプションの値です。 // 学年に対応する学期を格納する 2 次元配列を作成します
var array1 = new Array(); オフarray1[ '2 年生'] = ['1 学期', ' Second Semester']; For (var I = 0; I & lt; array1 [o1] .Length; i ++) {
// 最初の学年の場合は、最初の学期の値を 0 に設定します。そして、第2学期の値は1に設定されています。
Else {p OPT1 = New Option (Array1 [O1] [i], I+2);
}
// オプション OPT1 を TERM に動的に追加し、ドロップダウン リスト項目
term.options を取得します。 addddddddddddddddddddd（opt1）;
array2[0]=['HTML','Java','SqlServer','C#']; array2[0]= 学期ドロップダウンリスト 最初の項目 o Course.options.length = 1; // 配列を走査し、オプション OPT2 がコースにあり、ドロップダウン リスト項目
for (var I in array2 [O2]) {
var OPT2 = new Options(array2[o2][i] ,i); /script>