Kode ini sangat sederhana. Di sini saya terutama merekomendasikan ide implementasi kode ini kepada Anda, yang unik.
Berikan kodenya:
Salinan kode adalah sebagai berikut:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten-tipe" content = "text /html; charset = gb2312" />
<title> memilih </iteme>
<type style = "text/css">
*{font-size: 14px;}
SELECT {height: 20px; font-size: 12px;}
</tyle>
</head>
<body>
<Div style = 'Color: Red'> 2-level Linkage </div>
<Div id = 'Demo1'> </div> <br> <br> <br>
<Div style = 'Color: Red'> 3-level Linkage </div>
<Div id = 'Demo2'> </div> <br> <br> <br>
<Div style = 'Color: Red'> Linkage 4-level </div>
<Div id = 'Demo3'> </div> <br> <br> <br>
<Div style = 'Color: Red'> Linkage 5-level </div>
<Div id = 'Demo4'> </div> <br> <br> <br>
<bahasa skrip = "javascript">
var sys = (function (ua) {
var s = {};
s.ie = ua.match (/msie ([/d. media+)/)?true:false;
s.firefox = ua.match (/firefox // ([/d.]+)/)? Benar: false;
s.chrome = ua.match (/chrome // ([/d.]+)/)? Benar: false;
s.ie6 = (s.ie && ([/msie (/d)/.0/i.exec(navigator.useragent)........0asar 0] == 6))? Benar: false;
s.ie7 = (s.ie && ([/msie (/d)/.0/i.exec(navigator.useragent)....ilai 0ilai] == 7))? Benar: false;
s.ie8 = (s.ie && ([/msie (/d)/.0/i.exec(navigator.useragent)........0$ilai] == 8))? Benar: false;
kembali S;
}) (navigator.useragent.tolowercase ());
Sys.ie6 && document.execCommand ("latar belakangImagecache", false, true);
fungsi $ (id) {
return document.getElementById (id);
};
fungsi $$ (p, e) {
return p.geteLementsbyTagname (e);
};
fungsi addListener (elemen, e, fn) {
element.addeventlistener? element.addeventlistener (e, fn, false): element.attachevent ("on" + e, fn);
};
function removelistener (elemen, e, fn) {
element.removeeventlistener? element.removeeventlistener (e, fn, false): element.detachevent ("on" + e, fn);
};
var bind = function (objek, fun) {
var args = array.prototype.slice.call (argumen) .slice (2);
return function () {
return fun.apply (objek, args);
};
};
var bindaseventListener = function (objek, fun) {
var args = array.prototype.slice.call (argumen) .slice (2);
return function (event) {
return fun.apply (objek, [event || window.event] .concat (args));
};
};
var extand = function (tujuan, sumber) {
untuk (properti var di sumber) {
tujuan [properti] = sumber [properti];
};
};
var class = fungsi (properti) {
var _class = function () {return (argumen [0]! == null && this.initialize && typeof (this.initialize) == 'function')? this.initialize.apply (ini, argumen): ini;};
_class.prototype = properti;
mengembalikan _class;
};
// ============================================================== =================================================================
var selects = kelas baru ({
inisialisasi: fungsi (wadah, data, judul) {
this.container = wadah;
this.num = title.length;
this.events = array baru (title.length-1);
var i, l, pilih;
untuk (i = 0; i <this.num; i ++)
{
container.innerhtml = container.innerHtml + "" + title [i];
container.appendChild (document.createelement ('select'));
}
pilih = $$ (wadah, 'pilih') [0];
untuk (i = 0, l = data.length; i <l; i ++)
pilih.options.add (opsi baru (data [i] .txt, i));
addListener (pilih, 'ubah', bind (this, this.change, select, data, 0));
this.change (pilih, data, 0);
},
Ubah: fungsi (obj, data, num) {
if (num == this.num-1) kembali;
var menu = data [obj.value] .menu;
SELECT = $$ (this.container, 'select') [num+1];
SELECT.Length = 0;
if (! menu) kembali;
if (this.events [num]! = tidak terdefinisi) removelistener (pilih, 'ubah', this.events [num])
this.events [num] = bind (this, this.change, select, menu, num+1)
addListener (pilih, 'ubah', this.events [num]);
untuk (var i = 0, l = menu.length; i <l; i ++)
pilih.options.add (opsi baru (menu [i] .txt, i));
this.change (pilih, menu, num+1);
}
});
// ============================================================== =================================================================
window.onload = function () {
var data = [{"txt": "Human Race", "Menu": [{"txt": "Magic Master", "Menu": [{"txt": "Magic Skill", "Menu": [{"txt": "elemen air", "menu": [{"txt": "summoning" {{"txt": {{{{txt ":" {{{{{{{{{txt ": Hal "}]}, {" txt ":" snowstorm "," menu ": [{" txt ":" Magic Attack "}, {" txt ":" Area Damage "}, {" txt ":" sangat indah "}," txt ":" dapat terganggu "}}," txt "{" txt ": {{{{{" {"txt" Momen}]}, {"txt": "hero description", "menu": [{"txt": "Intellect Hero"}, {"txt": "Strong Halo"}, {"txt": "auxiliary"},]}] {"txt": "King of the Hill", "menu": "{" txt ":" TXT ":" TXT ":" TXT ":" TXT ":" King of the Hill " Skill "," menu ": [{" txt ":" Storm Hammer "}, {" tx t ":" cone ground "}, {" txt ":" cone diafragm "}, {" txt ":" hero description "," menu ": [{" txt ":" kekuatan pahlawan "}, {" txt "txt" Kemampuan "}, {" txt ":" pendek "}, {" txt ":" keterampilan hebat cabul "}]}]}]}, {" tt "t": "keterampilan hebat cabul"}]}]}}, {"t" t ":" pendek "}]}}, {" xt ":" paladin "," menu ": [{" txt ":" Paladin Skill "," menu ": [{" txt ":" Light "}, {" txt ":" tak terkalahkan "}, {" txt ":" hara "}, {" txt ":" resurrection "}]}}} {" {"txt": "{" {"{" txt ":" {"{" {"{" {"{" {"{" {"{" {"{" {"{" {"{" {"{" {"{" {"{" {"{" {"{" {"{" {"{" {"{" {"{" {"{" {"{" {"{" {"{" {"{" {"{" TX Deskripsi "," Menu ": [{" txt ":" kekuatan pahlawan "}, {" txt ":" hero bantuan "}, {" txt ":" Personal Hunt "}]}]}, {" txt ":" Blood Mage "," menu ": [{" txt ":" Darah Mage " Skill "," menu ": [{" txt ":" flame "}, {" txt ":" blue-absorbing "}, {" txt ":" nonsity "}, {" txt ":" Divine Bird Phoenix "}] {" TXT ":" DESKRIPSI PAHLAWAN ",": {{{"TXT" TXT ":" TXT ":" TXT ":" TXLECT ":" TXLECT ":" TXT ":" "" ":" {"TXT": "TXLECT": "TXLECT": "TXLECT": "TXTLEK": "" "": {"TXT": "TXT": "" "" "{" TXT ":" TXT ":" TXT "TXT": "TXT" TXT ":" "" " Pahlawan "}, {" txt ":" hero assisted "}, {" txt ":" seperti itu tampan "}]}]}]}]}, {" txt ":" Beast clan "," menu ": [{" txt ":" Silent Saint "," menu ": [{" txt ":" The Saint ":" menu "" menu ": [{" txt ":" The Saint ":" TXLE "TXLE" ["TXT": "TXT": "TXT": "TXT": "TXT": "TXT": "TXT": "TXT": "TXT": "TXT": "TXT": {{{{{{{{{"txt" Langkah "}, {" txt ":" shadow clones "}, {" txt ":" critical strike "}, {" txt ":" blade storm "}]}, {" txt ":" hero description "," menu ": [{" txt ":" Agile Hero "}, {" txt ":" high -ratang high -ratusan " merampok "}, {" txt ":" tidak senonoh dan tak terkalahkan "}, {" txt ":" sangat kuat "}]}]}]}, {" txt ":" nabi manusia "," menu ": [{" txt ":" nabi skill","menu":[{"txt":"Wolf"},{"txt":"Day"},{"txt":"Lightning chain"}, {"txt":"Earthquake"}]},{"txt":"Hero description","menu":[{"txt":"Intellect hero"},{"txt":"Harassment hero"}]}]}]},{"txt":"Tatou Chief","menu":[{"txt":"Shockwave" },{"txt":"Position"},{"txt":"Durability Halo"},{"txt":"Resurrection"}]},{"txt":"Hero Deskripsi "," menu ": [{" txt ":" kekuatan pahlawan "}, {" txt ":" magic power "}, {" txt ":" panjang kuat "}, {" txt ":" perisai daging "}]}}]}, {" txt ":" small yy "," ": {" {"txt": "txt": "small yy", "{" {"txt" Skill "," menu ": [{" txt ":" ubah hewani "}, {" txt ":" health wave "}, {" txt ":" stick ular kecil "}, {" txt ":" semuanya tak terkalahkan "}]}, {" txt ":" deskripsi pahlawan "," ": [{" TXT ":" TXT "{" TXT "," TXLE "," TXT "," TXT "," TXT "TXLE", "TXLE", "TXLE", "TXLE", " Power"},{"txt":"Assisted Hero"}]}]}]}]}]},{"txt":"Undead","menu":[{"txt":"Death Knight","menu":[{"txt":"Dead Rider Skill","menu":[{txt:"Stool Tumblr"} ,{txt:"Evil Halo "}, {txt:" Kontrak Kematian "}, {txt:" Resurrection of the Dead "}]}, {" txt ":" hero description "," menu ": [{txt:" mengendarai domba "}, {txt:" sebelum usia tua "}, {txt:" frost "}, {txt:" ah usia tua "}, {txt:" frost "}, {txt:" Ah usia tua "}, {txt:" frost "}, {{txt: sebelum usia tua" Seth "}]}]}]}, {" txt ":" lich "," menu ": [{" txt ":" lich skill "," menu ": [{txt:" Raging ice "}, {txt:" Ice Armor "}, {txt:" Contract "}, {TXT:" dengan bajingan {{{txt: "{" {{{txt: " Deskripsi "," Menu ": [{txt:" mengenakan rok "}, {txt:" all tulang "}, {txt:" no man or woman "}]}]}]}, {" txt ":" Fear Demon King "," menu ": [{" txt ":" Demon King Skill "}} {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{Demon" {" Deskripsi "}]}, {" txt ":" pangeran xiaoqiang "," menu ": [{" txt ":" prince skill "}, {" txt ":" deskripsi pahlawan "}]}]}];
Selects baru ($ ('Demo1'), data, ["ras", "pahlawan"]);
Selects baru ($ ('Demo2'), data, ["ras", "pahlawan", "Pendahuluan"]);
seleksi baru ($ ('Demo3'), data, ["ras", "pahlawan", "pengantar", "keterampilan"]);
Selects baru ($ ('Demo4'), Data, ["Race", "Hero", "Pendahuluan", "Keterampilan", "Deskripsi Keterampilan"]);
}
</script>
</body>
</html>