Rumah >hujung hadapan web >tutorial js >Menggunakan JavaScript untuk melaksanakan pemprosesan menu lata tanpa had

Menggunakan JavaScript untuk melaksanakan pemprosesan menu lata tanpa had

WBOYasal: 2023-06-15 21:09:481739semak imbas

Menu lata tanpa had ialah kaedah interaksi bahagian hadapan yang sangat biasa dan digunakan secara meluas dalam banyak senario. Artikel ini akan memperkenalkan kepada anda cara menggunakan JavaScript untuk melaksanakan menu lata tanpa had. Saya harap ia akan membantu anda.

1. Idea pelaksanaan

Idea untuk melaksanakan menu lata tanpa had di bahagian hadapan boleh diringkaskan sebagai:

Tentukan sumber data: biasanya a Objek JSON, digunakan untuk Menyimpan semua peringkat data menu;
Pemaparan dinamik menu: apabila tahap pilihan tertentu dipilih, tahap menu seterusnya dijana secara dinamik;
Mencapai kesan pautan : apabila tahap pilihan tertentu dipilih Apabila memilih pilihan, menu pada tahap seterusnya mesti dikemas kini tepat pada masanya dan menukar pilihan yang tersedia mengikut pilihan yang dipilih.

Idea pelaksanaan khusus adalah seperti berikut:

Tentukan tatasusunan untuk menyimpan nilai yang dipilih pada setiap peringkat
Tentukan berbilang teg Pilih digunakan untuk memaparkan menu pada setiap peringkat;
mengikat acara perubahan pada setiap teg pilihan Apabila salah satu pilihan dipilih, nilai pada kedudukan yang sepadan dalam tatasusunan dikemas kini dan teg pilih seterusnya dijana. dan memberikan pilihan pilihan peringkat seterusnya berdasarkan pilihan peringkat sebelumnya; gelung
untuk menjana semua peringkat teg terpilih dan memasukkannya ke dalam DOM.

2. Pelaksanaan Kod

Proses melaksanakan menu lata infinite terutamanya melibatkan dua bahagian iaitu susun atur halaman HTML dan penulisan kod JavaScript. Seterusnya, mari kita lihat butiran pelaksanaan kedua-dua bahagian masing-masing.

Susun atur halaman HTML

Dalam halaman HTML, kita perlu mencipta berbilang teg pilihan untuk memaparkan menu pada setiap peringkat. Pada masa yang sama, anda juga perlu mengikat peristiwa perubahan pada setiap teg pilihan untuk melaksanakan pengemaskinian dinamik menu.

<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>

Pelaksanaan kod JavaScript

Dalam kod JavaScript, anda perlu mentakrifkan objek JSON untuk menyimpan semua peringkat data menu. Selepas memilih pilihan pada tahap tertentu, menu pada tahap seterusnya dijana secara dinamik dan pilihan yang tersedia ditukar mengikut pilihan yang dipilih. Pelaksanaan khusus adalah seperti berikut:

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();

Dalam kod ini, menuData objek JSON yang mengandungi data menu untuk setiap peringkat dan peringkat tatasusunan ditakrifkan untuk menyimpan pengecam setiap peringkat. Pada masa yang sama, array selectedValue juga ditakrifkan untuk menyimpan nilai yang dipilih pada setiap peringkat. Selepas itu, fungsi init ditakrifkan untuk memulakan menu peringkat pertama, iaitu menu untuk menjana wilayah.

Seterusnya, dua fungsi, changeProvince dan changeCity, ditakrifkan untuk mengemas kini nilai wilayah dan bandar yang dipilih dan menjana semula menu peringkat seterusnya.

Akhir sekali, fungsi generateMenu ditakrifkan, yang digunakan untuk menjana menu tahap semasa dan membuat panggilan rekursif ke peringkat seterusnya. Dalam proses menjana menu, teg pilih dijana dan pilihan yang sepadan ditambah dan ditambah pada DOM selepas setiap pemaparan menu selesai. Jika tahap semasa bukan tahap terakhir, maka panggilan rekursif dibuat berdasarkan nilai yang dipilih pada masa ini sehingga semua peringkat menu dijana.

3. Ringkasan

Melalui pelaksanaan kod di atas, kita dapat melihat bahawa tidak sukar untuk melaksanakan menu lata tanpa had dalam JavaScript. Kaedah pelaksanaan yang diperkenalkan dalam artikel ini adalah kaedah pelaksanaan yang agak asas Bagi keperluan yang berbeza, ia perlu diselaraskan mengikut situasi sebenar.

Sudah tentu, sudah ada beberapa perpustakaan pihak ketiga yang agak matang yang boleh digunakan untuk melaksanakan menu lata tanpa had, seperti jQuery dan Vue.js, yang boleh melaksanakan fungsi ini dengan lebih mudah. Walau bagaimanapun, kita masih harus memahami cara menggunakan perpustakaan ini berdasarkan penguasaan prinsip, supaya kita boleh menggunakan alatan ini dengan lebih fleksibel untuk menyelesaikan pelbagai tugas yang kompleks.

Atas ialah kandungan terperinci Menggunakan JavaScript untuk melaksanakan pemprosesan menu lata tanpa had. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Menggunakan JavaScript untuk mencapai kesan karusel imejArtikel seterusnya：Menggunakan JavaScript untuk mencapai kesan karusel imej

Artikel berkaitan

Lihat lagi