JavaScript を使用して無限カスケード メニュー処理を実装する
無限カスケード メニューは非常に一般的なフロントエンド対話方法であり、多くのシナリオで広く使用されています。この記事ではJavaScriptを使用して無限カスケードメニューを実装する方法を紹介しますので、ご参考になれば幸いです。
1. 実装のアイデア
フロントエンドで無限のカスケード メニューを実装するアイデアは次のように要約できます:
- データ ソースを定義します。 JSON オブジェクト。すべてのレベルのメニュー データを保存するために使用されます。
- メニューの動的なレンダリング: 特定のレベルのオプションが選択されると、次のレベルのメニューが動的に生成されます。
- リンク効果を実現します。 : 特定のレベルのオプションが選択されたとき オプションを選択すると、次のレベルのメニューが適時に更新され、選択されたオプションに応じて利用可能なオプションが変更される必要があります。
具体的な実装のアイデアは次のとおりです:
- 各レベルで選択された値を格納する配列を定義します;
- 複数の Select タグが使用されることを定義します各レベルでメニューを表示するには;
- 変更イベントを各選択タグにバインドします。オプションの 1 つが選択されると、配列内の対応する位置の値を更新し、次の選択タグを生成します。そしてレンダリングします。前のレベルのオプションに基づく次のレベルのオプション オプション;
- すべてのレベルの選択タグを生成し、DOM に挿入するループ。
2. コードの実装
無限カスケード メニューを実装するプロセスには、主に 2 つの部分、つまり HTML ページのレイアウトと JavaScript コードの記述が含まれます。次に、2 つの部分の実装の詳細をそれぞれ見てみましょう。
- HTML ページ レイアウト
HTML ページでは、各レベルでメニューを表示するために複数の選択タグを作成する必要があります。同時に、メニューの動的更新を実装するために、change イベントを各選択タグにバインドする必要もあります。
<body>
<form>
<select id="province" onchange="changeProvince()">
<option value="">请选择省份</option>
<option value="1">浙江</option>
<option value="2">江苏</option>
</select>
<select id="city" onchange="changeCity()"></select>
<select id="area"></select>
</form>
</body>- JavaScript コードの実装
JavaScript コードでは、すべてのレベルのメニュー データを保存するための JSON オブジェクトを定義する必要があります。特定のレベルでオプションを選択すると、次のレベルのメニューが動的に生成され、選択したオプションに応じて利用可能なオプションが変更されます。具体的な実装は次のとおりです。
var menuData = {
"province": {
"1": "杭州市",
"2": "温州市"
},
"city": {
"1": {
"11": "西湖区",
"12": "江干区"
},
"2": {
"21": "鹿城区",
"22": "瓯海区"
}
},
"area": {
"11": {
"111": "西溪湿地",
"112": "灵隐寺"
},
"12": {
"121": "杭州大厦",
"122": "江干公园"
},
"21": {
"211": "南湖",
"212": "红旗广场"
},
"22": {
"221": "瓯海公园",
"222": "龙湾湾国际商务区"
}
}
}
var level = ["province", "city", "area"];
var selectedValue = ["", "", ""];
function init() {
generateMenu("province", "1");
}
function changeProvince() {
selectedValue[0] = document.getElementById("province").value;
document.getElementById("city").innerHTML = "";
document.getElementById("area").innerHTML = "";
generateMenu("city", selectedValue[0]);
}
function changeCity() {
selectedValue[1] = document.getElementById("city").value;
document.getElementById("area").innerHTML = "";
generateMenu("area", selectedValue[1]);
}
function generateMenu(currentLevel, currentValue) {
var select = document.createElement("select");
select.setAttribute("id", currentLevel);
select.setAttribute("onchange", "change" + currentLevel.charAt(0).toUpperCase() + currentLevel.slice(1) + "()");
var option = document.createElement("option");
option.setAttribute("value", "");
option.innerHTML = "请选择" + currentLevel;
select.appendChild(option);
var submenu = menuData[currentLevel];
for (var key in submenu) {
if (submenu[key] != null) {
var option = document.createElement("option");
option.setAttribute("value", key);
option.innerHTML = submenu[key];
select.appendChild(option);
}
}
document.getElementById(currentLevel).appendChild(select);
if (currentValue != "") {
document.getElementById(currentLevel).value = currentValue;
if (level.indexOf(currentLevel) < level.length - 1) {
var nextLevel = level[level.indexOf(currentLevel) + 1];
generateMenu(nextLevel, selectedValue[level.indexOf(nextLevel)]);
}
}
}
init();このコードでは、各レベルの識別子を格納するために、各レベルのメニュー データを含む JSON オブジェクト menuData と配列レベルが最初に定義されます。同時に、各レベルで選択された値を保存する配列 selectedValue も定義されます。その後、init 関数を定義して、第 1 レベルのメニュー、つまり州を生成するためのメニューを初期化します。
次に、changeProvince と changeCity という 2 つの関数が定義されています。これらは、選択した州と都市の値を更新し、次のレベルのメニューを再生成するために使用されます。
最後に、generateMenu 関数が定義されています。この関数は、現在のレベルのメニューを生成し、次のレベルへの再帰呼び出しを行うために使用されます。メニューを生成するプロセスでは、選択タグが生成され、対応するオプションが追加され、各メニューのレンダリングが完了した後に DOM に追加されます。現在のレベルが最後のレベルではない場合、すべてのレベルのメニューが生成されるまで、現在選択されている値に基づいて再帰呼び出しが行われます。
3. 概要
上記のコードの実装を通じて、JavaScript で無限カスケード メニューを実装するのは難しくないことがわかります。この記事で紹介する実装方法は比較的基本的な実装方法ですが、さまざまなニーズに応じて、実際の状況に応じて調整する必要があります。
もちろん、jQuery や Vue.js など、この機能をより便利に実装できる、無制限のカスケード メニューの実装に使用できる比較的成熟したサードパーティ ライブラリがすでにいくつかあります。ただし、これらのツールをより柔軟に使用してさまざまな複雑なタスクを完了できるように、原理の習得に基づいてこれらのライブラリの使用法を理解する必要があります。
以上がJavaScript を使用して無限カスケード メニュー処理を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7322
9
1625
14
1350
46
1262
25
1209
29
WIN10サービスホストの動作プロセスがCPUを過剰に占有している
Mar 27, 2024 pm 02:41 PM
1. まず、タスクバーの空白スペースを右クリックして[タスクマネージャー]オプションを選択するか、スタートロゴを右クリックして[タスクマネージャー]オプションを選択します。 2. 開いたタスク マネージャー インターフェイスで、右端の [サービス] タブをクリックします。 3. 開いた[サービス]タブで、下の[サービスを開く]オプションをクリックします。 4. 表示される[サービス]ウィンドウで、[InternetConnectionSharing(ICS)]サービスを右クリックし、[プロパティ]オプションを選択します。 5. 表示されたプロパティ画面で[プログラムから開く]を[無効]に変更し、[適用]をクリックして[OK]をクリックします。 6. スタートロゴをクリックし、シャットダウンボタンをクリックして[再起動]を選択し、コンピュータの再起動を完了します。
WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー
Dec 17, 2023 pm 05:30 PM
WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジー はじめに： インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー
CSV ファイル操作のクイックガイド
Dec 26, 2023 pm 02:23 PM
CSV 形式ファイルを開いて処理する方法を簡単に学習します。データ分析と処理の継続的な開発により、CSV 形式は広く使用されるファイル形式の 1 つになりました。 CSV ファイルは、さまざまなデータ フィールドがカンマで区切られた、シンプルで読みやすいテキスト ファイルです。学術研究、ビジネス分析、データ処理のいずれの場合でも、CSV ファイルを開いて処理する必要がある状況に頻繁に遭遇します。次のガイドでは、CSV 形式ファイルを開いて処理する方法をすぐに学ぶ方法を説明します。ステップ 1: CSV ファイル形式を理解する まず、
PHP で特殊文字を処理し、一重引用符を変換する方法を学習します。
Mar 27, 2024 pm 12:39 PM
PHP 開発のプロセスでは、特殊文字の処理が一般的な問題になります。特に文字列処理では、特殊文字がエスケープされることがよくあります。その中でも、特殊文字を一重引用符に変換することは比較的一般的な要件です。これは、PHP では一重引用符が文字列をラップする一般的な方法であるためです。この記事では、PHP での特殊文字変換シングルクォーテーションの扱い方と具体的なコード例を説明します。 PHP では、特殊文字には一重引用符 (')、二重引用符 (")、バックスラッシュ () などが含まれますが、これらに限定されません。
簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法
Jan 05, 2024 pm 06:08 PM
JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用
JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築
Dec 17, 2023 pm 05:13 PM
JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは
JavaScript で HTTP ステータス コードを簡単に取得する方法
Jan 05, 2024 pm 01:37 PM
JavaScript で HTTP ステータス コードを取得する方法の紹介: フロントエンド開発では、バックエンド インターフェイスとの対話を処理する必要があることが多く、HTTP ステータス コードはその非常に重要な部分です。 HTTP ステータス コードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータス コードとは何ですか? HTTP ステータス コードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが
PHP プログラミングのヒント: 最後のセミコロンの状況に対処する方法
Mar 26, 2024 pm 12:45 PM
PHP プログラミングのヒント: 最後のセミコロンを処理する方法 PHP プログラミングでは、最後のセミコロンを処理する必要がある状況によく遭遇します。特にループや条件文では、セミコロンを 1 つ減らしたり増やしたりすることで、プログラム エラーが発生しやすくなります。この状況を回避するために、最後のセミコロンの状況を処理するいくつかのプログラミング手法を採用できます。以下に、最後のセミコロンを処理するための一般的な手法とコード例をいくつか示します。 1. if ステートメントを使用して最後のセミコロンを判断します。
