hujung hadapan web
tutorial js
Menggunakan JavaScript untuk melaksanakan pemprosesan menu lata tanpa had
Menggunakan JavaScript untuk melaksanakan pemprosesan menu lata tanpa had
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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1392
52
36
110
Proses operasi hos perkhidmatan WIN10 yang menduduki terlalu banyak CPU
Mar 27, 2024 pm 02:41 PM
1. Mula-mula, kita klik kanan ruang kosong bar tugas dan pilih pilihan [Task Manager], atau klik kanan logo mula, dan kemudian pilih pilihan [Task Manager]. 2. Dalam antara muka Pengurus Tugas yang dibuka, kami klik tab [Perkhidmatan] di hujung kanan. 3. Dalam tab [Perkhidmatan] yang dibuka, klik pilihan [Buka Perkhidmatan] di bawah. 4. Dalam tetingkap [Services] yang terbuka, klik kanan perkhidmatan [InternetConnectionSharing(ICS)], dan kemudian pilih pilihan [Properties]. 5. Dalam tetingkap sifat yang terbuka, tukar [Buka dengan] kepada [Disabled], klik [Apply] dan kemudian klik [OK]. 6. Klik logo mula, kemudian klik butang tutup, pilih [Mulakan Semula], dan selesaikan mula semula komputer.
WebSocket dan JavaScript: teknologi utama untuk melaksanakan sistem pemantauan masa nyata
Dec 17, 2023 pm 05:30 PM
WebSocket dan JavaScript: Teknologi utama untuk merealisasikan sistem pemantauan masa nyata Pengenalan: Dengan perkembangan pesat teknologi Internet, sistem pemantauan masa nyata telah digunakan secara meluas dalam pelbagai bidang. Salah satu teknologi utama untuk mencapai pemantauan masa nyata ialah gabungan WebSocket dan JavaScript. Artikel ini akan memperkenalkan aplikasi WebSocket dan JavaScript dalam sistem pemantauan masa nyata, memberikan contoh kod dan menerangkan prinsip pelaksanaannya secara terperinci. 1. Teknologi WebSocket
Panduan ringkas untuk manipulasi fail CSV
Dec 26, 2023 pm 02:23 PM
Ketahui cara membuka dan memproses fail format CSV dengan pantas Dengan pembangunan analisis dan pemprosesan data yang berterusan, format CSV telah menjadi salah satu format fail yang digunakan secara meluas. Fail CSV ialah fail teks yang ringkas dan mudah dibaca dengan medan data berbeza yang dipisahkan dengan koma. Sama ada dalam penyelidikan akademik, analisis perniagaan atau pemprosesan data, kami sering menghadapi situasi di mana kami perlu membuka dan memproses fail CSV. Panduan berikut akan menunjukkan kepada anda cara belajar membuka dan memproses fail format CSV dengan cepat. Langkah 1: Fahami format fail CSV Pertama,
Ketahui cara mengendalikan aksara khas dan menukar petikan tunggal dalam PHP
Mar 27, 2024 pm 12:39 PM
Dalam proses pembangunan PHP, berurusan dengan aksara khas adalah masalah biasa, terutamanya dalam pemprosesan rentetan, aksara khas sering terlepas. Antaranya, menukar aksara khas kepada petikan tunggal adalah keperluan yang agak biasa, kerana dalam PHP, petikan tunggal adalah cara biasa untuk membungkus rentetan. Dalam artikel ini, kami akan menerangkan cara mengendalikan petikan tunggal penukaran aksara khas dalam PHP dan memberikan contoh kod khusus. Dalam PHP, aksara khas termasuk tetapi tidak terhad kepada petikan tunggal ('), petikan berganda ("), segaris ke belakang (), dsb. Dalam rentetan
Bagaimana untuk menyelesaikan masalah selepas peningkatan dari win7 ke win10 gagal?
Dec 26, 2023 pm 07:49 PM
Jika sistem operasi yang kami gunakan ialah win7, sesetengah rakan mungkin gagal untuk menaik taraf daripada win7 kepada win10 semasa menaik taraf. Editor berpendapat kita boleh cuba menaik taraf sekali lagi untuk melihat sama ada ia dapat menyelesaikan masalah. Mari kita lihat apa yang editor lakukan untuk perincian~ Apa yang perlu dilakukan jika win7 gagal untuk menaik taraf kepada win10 Kaedah 1: 1. Adalah disyorkan untuk memuat turun pemacu terlebih dahulu untuk menilai sama ada komputer anda boleh dinaik taraf kepada Win10. Kemudian gunakan ujian pemandu selepas menaik taraf Periksa jika terdapat sebarang keabnormalan pemandu, dan kemudian membaikinya dengan satu klik. Kaedah 2: 1. Padam semua fail di bawah C:\Windows\SoftwareDistribution\Download. 2.win+R run "wuauclt.e
JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap
Dec 17, 2023 pm 05:13 PM
JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap Pengenalan: Hari ini, ketepatan ramalan cuaca sangat penting kepada kehidupan harian dan membuat keputusan. Apabila teknologi berkembang, kami boleh menyediakan ramalan cuaca yang lebih tepat dan boleh dipercayai dengan mendapatkan data cuaca dalam masa nyata. Dalam artikel ini, kita akan mempelajari cara menggunakan teknologi JavaScript dan WebSocket untuk membina sistem ramalan cuaca masa nyata yang cekap. Artikel ini akan menunjukkan proses pelaksanaan melalui contoh kod tertentu. Kami
Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP
Jan 05, 2024 pm 06:08 PM
Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest
Bagaimana untuk mendapatkan kod status HTTP dalam JavaScript dengan cara yang mudah
Jan 05, 2024 pm 01:37 PM
Pengenalan kepada kaedah mendapatkan kod status HTTP dalam JavaScript: Dalam pembangunan bahagian hadapan, kita selalunya perlu berurusan dengan interaksi dengan antara muka bahagian belakang, dan kod status HTTP adalah bahagian yang sangat penting daripadanya. Memahami dan mendapatkan kod status HTTP membantu kami mengendalikan data yang dikembalikan oleh antara muka dengan lebih baik. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan memberikan contoh kod khusus. 1. Apakah kod status HTTP bermakna kod status HTTP apabila penyemak imbas memulakan permintaan kepada pelayan, perkhidmatan tersebut
