Contoh-contoh dalam artikel ini berbagi efek khusus dari menu drop-down JS untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
Contoh 1: Menu drop-down provinsi dan kota tertaut
Peristiwa Onchange terjadi ketika konten domain berubah.
<script type = "text/javascript"> var arr = new array (); // Data Array // Tentukan data, struktur: id, nama, ID induk arr [arr.length] = [1, 'beijing', null]; arr [arr.length] = [2, 'Sichuan', null]; arr [arr.length] = [3, 'guangdong', null]; arr [arr.length] = [4, 'beijing', 1]; arr [arr.length] = [5, 'chengdu', 2]; arr [arr.length] = [6, 'Guangzhou', 3]; arr [arr.length] = [7, 'shenzhen', 3]; // Pengaturan dinamis dari fungsi item pull-down Filloptions (type) {if (type == 'provinsi') {// Dapatkan dom dari menu drop-down provinsi var provinsi = document.geteLementById ("provinsi"); province.innerhtml = ''; // konten kosong pertama // Isi sub-karakter var prostr = '<option value = ""> </ption>'; // Transfer array untuk (var i = 0; i <arr.length; i ++) {var item = arr [i]; // Item saat ini // Jika tidak ada ID induk, itu adalah provinsi jika (item [2] == null) prostr+= '<opsi value ='+item [0]+'>'+item [1]+'</option>'; } province.innerHtml = prostr; // Isi konten baru} lain jika (type == 'city') {// Dapatkan id dari provinsi saat ini var currproid = document.geteLementById ("provinsi"). nilai; if (currproid == '') mengembalikan false; // Dapatkan DOM dari menu drop-down City var city = document.geteLementById ("city"); city.innerhtml = ''; // Isi konten terlebih dahulu // Isi karakter var citystr = '<option value = ""> </ption>'; // transweep array untuk (var i = 0; i <arr.length; i ++) {var item = arr [i]; // item saat ini // menilai apakah itu kota yang disimpan saat ini jika (item [2] == Currproid) CityStr+= '<value opsi ='+item [0]+'>'+item [1]+'</tiption>'; } city.innerhtml = citystr; // isi konten baru}} </script> <body style = "text-align: center;" onload = "Filloptions ('provinsi');"> <!-Tentukan menu tarik-turun-> Penghematan: <pilih id = "provinsi" onchange = "filloptions ('city')"> </pilih> <br/> <br/> kota: <pilih id = "kota"> </pilih> <br/> <br/> </body>Contoh 2: Tautan Tiga Tingkat Provinsi, Kota dan Menu Drop-Down
<script type = "text/javascript"> var arr = new array (); // Data Array // Tentukan data, struktur: id, nama, ID induk arr [arr.length] = [1, 'beijing', null]; arr [arr.length] = [2, 'Sichuan', null]; arr [arr.length] = [3, 'guangdong', null]; arr [arr.length] = [4, 'beijing', 1]; arr [arr.length] = [5, 'chengdu', 2]; arr [arr.length] = [6, 'Guangzhou', 3]; arr [arr.length] = [7, 'shenzhen', 3]; arr [arr.length] = [8, 'distrik wuhou', 5]; arr [arr.length] = [9, 'Distrik Qingyang', 5]; arr [arr.length] = [10, 'distrik Baiyun', 6]; arr [arr.length] = [11, 'Zengcheng City', 6]; arr [arr.length] = [12, 'Conghua City', 6]; // Pengaturan dinamis dari Fungsi Fungsi Proyek Tarik-bawah (Type) {if (type == 'provinsi') {// Dapatkan DOM dari menu drop-down provinsi var provinsi = document.getElementById ("provinsi"); province.innerhtml = ''; // Konten kosong pertama // Isi karakter dari var saved prostr = '<option value = ""> </tiption>'; untuk (var i = 0; i <arr.length; i ++) {// Transfer array var item = arr [i]; // Item saat ini // Jika tidak ada ID induk, itu adalah provinsi jika (item [2] == null) prostr+= '<opsi value ='+item [0]+'>'+item [1]+'</option>'; } province.innerhtml = prostr; // Isi konten baru} lain jika (type == 'city') {// Dapatkan ID provinsi saat ini var currproid = document.geteLementById ("provinsi"). Nilai; if (currproid == '') mengembalikan false; // Dapatkan DOM dari menu drop-down City var city = document.geteLementById ("city"); city.innerhtml = ''; // konten kosong pertama // Isi karakter kota var citystr = '<option value = ""> </pection>'; untuk (var i = 0; i <arr.length; i ++) {// Transfer array var item = arr [i]; // Item saat ini // menilai apakah itu kota yang saat ini disimpan jika (item [2] == Currproid) CityStr+= '<Option value ='+item [0]+'>'+item [1]+'</tiption>'; } city.innerHtml = citystr; // isi konten baru} else if (type == 'Area') {// Dapatkan ID dari kota saat ini var CurrcityId = document.getElementById ("City"). Nilai; if (CurrcityId == '') mengembalikan false; // Dapatkan DOM dari menu drop-down distrik dan county var Area = document.getElementById ("Area"); Area.innerhtml = ''; // Isi Karakter Distrik dan Kabupaten Var AreaTtr = '<Option value = ""> </ption>'; untuk (var i = 0; i <arr.length; i ++) {// Transfer array var item = arr [i]; // item saat ini // menilai apakah itu distrik atau kabupaten di bawah kota saat ini jika (item [2] == CurrcityId) AreaTtr+= '<Option value ='+item [0]+'>'+item [1]+'</tiption>'; } Area.innerHtml = Area; // Isi konten baru}} </script> <body style = "text-align: center;" Onload = "Filloptions ('Provinsi');"> <!-Tentukan menu drop-down-> Provinsi: <pilih id = "provinsi" onchange = "filloptions ('city')"> </selection> <br/> <br/> City: <pilih id = "city" Onchange = "Filloptions ('Area')"> </Pilih/Kota ":" FillOptions ('Area') <//</city/city: "Area '> <bred>:" city ":" city "oFlOptions (' Area '> ID = "Area"> </ pilih> <br/> <br/> </body>Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.