jsでの3階層連携の実装

リンケージの実装は実際には非常に簡単ですが、いくつかの詳細は間違いやすいものです。ここでは、第 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>

関連ラベル：

javascript js中三级联动的实现

ソース：php.cn

前の記事：js の定義と配列オブジェクトの走査 次の記事：jsデータ型を検出する4つの方法

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

• PHP配列に要素を追加する方法
  2023-03-14 15:58:02
• シンプルな多肢選択評価システムを実装する JS を示す例
  1970-01-01 08:00:00
• 同じ IP の複数の送信を制限する PHP ソリューション
  2023-03-15 07:38:01
• 正規表現を使用して HTML でフォーム検証を実装する
  1970-01-01 08:00:00
• JavaScript 厳密モードでのこの指摘の問題の詳細な説明
  1970-01-01 08:00:00
• Java でツリー メニュー (マルチレベル メニューを含む) を構築するためのコード例
  1970-01-01 08:00:00
• ホバーが離れたときにスムーズな遷移を実装する CSS3 の詳細な例
  1970-01-01 08:00:00
• スワイパーカルーセル画像のソースコード共有分析
  1970-01-01 08:00:00
• VsCode プラグインを要約して整理する
  1970-01-01 08:00:00
• HttpUtils リクエスト ツール クラス コード
  1970-01-01 08:00:00

最新の問題

function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";

から 2024-04-29 11:01:01

0

2

1765

Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?

から 2024-04-23 00:22:19

0

10

1905

子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。

から 2024-04-19 15:37:47

0

1

1624

親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');

から 2024-04-18 23:52:34

0

1

1531

CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア

から 2024-04-16 10:10:18

0

0

1569

関連トピック

詳細>

• DOSオペレーティングシステムとはどういう意味ですか?
• QQスペースのWebページが開けないのはなぜですか?
• i5とi7の違い
• OuYiの出金方法
• 仮想通貨取引にはどのプラットフォームが適していますか?
• 0x80070057エラーの解決策
• Word文書の行間を調整するチュートリアル
• CSS3のグラデーションプロパティとは何ですか?

人気のおすすめ

• jsはどういう意味ですか
• jsで文字列を配列に変換するにはどうすればよいですか?
• JavaScriptを使用してページを更新する方法
• js配列内の項目を削除する方法
• sqrt関数の使い方

人気のチュートリアル

詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1416493
• 
  PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ

  4256836
• 
  JAVA 初心者向けビデオチュートリアル

  2472891
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  503154
• 
  PHP ゼロベースの入門チュートリアル

  843797

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1416493 回の学習
• 
  JAVA 初心者向けビデオチュートリアル

  2472891 回の学習
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  503154 回の学習
• 
  Web フロントエンド開発の簡単な紹介

  215242 回の学習
• 
  PSビデオチュートリアルをゼロからマスターする

  876413 回の学習

• 
  [Web フロントエンド] Node.js クイック スタート

  6311 回の学習
• 
  海外のWeb開発フルスタックコースの完全なコレクション

  4944 回の学習
• 
  Go言語実践GraphQL

  4149 回の学習
• 
  550W ファンマスターが JavaScript をゼロから段階的に学習します

  630 回の学習
• 
  Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる

  21140 回の学習

最新のダウンロード

詳細>

ウェブエフェクト

公式サイト

サイト素材

フロントエンドテンプレート

• [フォームボタン] jQuery エンタープライズ メッセージ フォームの連絡先コード
• [プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果
• [メニューナビゲーション] HTML5 クールなパーティクル アニメーション ナビゲーション メニューの特殊効果
• [フォームボタン] jQuery ビジュアル フォームのドラッグ アンド ドロップ編集コード
• [プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤー コード
• [html5特殊効果] 古典的な HTML5 プッシュ ボックス ゲーム
• [画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール
• [フォトアルバム効果] CSS3 個人アルバム カバー ホバー ズーム効果

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

• [PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)
• [PNG素材] 4 つの赤い 2023 卒業バッジ ベクター素材 (AI+EPS+PNG)
• [バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）
• [PNG素材] 金色の卒業帽ベクター素材（EPS+PNG）
• [PNG素材] 黒と白のスタイルの山アイコン ベクター素材 (EPS+PNG)
• [PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）
• [バナー画像] フラット スタイルの植樹祭バナー ベクター素材 (AI+EPS)
• [PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG）

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

私たちについて 免責事項 Sitemap

PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！