ホームページ > 記事 > ウェブフロントエンド > JavaScript を使用して無限カスケードメニュー処理を実装する

JavaScript を使用して無限カスケードメニュー処理を実装する

WBOYオリジナル: 2023-06-15 21:09:481724ブラウズ

無限カスケードメニューは非常に一般的なフロントエンド対話方法であり、多くのシナリオで広く使用されています。この記事では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 サイトの他の関連記事を参照してください。

JavaScript json jquery vue.js html select 标识符递归循环 JS 对象事件 dom

声明：

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

前の記事：JavaScript を使用して画像カルーセル効果を実現する次の記事：JavaScript を使用して画像カルーセル効果を実現する

続きを見る

JavaScript を使用して無限カスケード メニュー処理を実装する

関連記事

JavaScript を使用して無限カスケードメニュー処理を実装する