Simple pull-down list linkage implementation

HTML structure:

1     <Selectname=""ID= "Select1"></Select>2     <Selectname=""ID= "Select2"></Select>3     <Selectname=""ID= "Select3"></Select>

Data code:

1     varPeople = [2{"id": "P1", "Name": "Science Fiction"},3{"id": "P2", "Name": "Fantasy novel"},4{"id": "P3", "Name": "Historical overhead"}5     ];6     varBookName = [7         [8{"id": "Kh1", "name": "The Great Cosmic Age"},9{"id": "kh2", "Name": "Star Battleship"},Ten{"id": "kh3", "Name": "Earth Epoch"} One         ], A         [ -{"id": "Qh1", "Name": "Wizard Tour"}, -{"id": "Qh2", "Name": "Perfect World"} the         ], -         [ -{"id": "jk1", "name": "Hero of the Qing Dynasty"}, -{"id": "jk2", "Name": "1852 Chinese"} +         ] -     ]; +     varAuthor = [ A["Zhttty", "Rainbow Gate", "Rainbow Gate 2"], at["A row of egrets on the Blue Sky", "Chen Dong"], -["0 qi", "Crimson Moon"] -];

View Code

JS Code:

1     functionlinkage () {2 3         varBox1 = document.getElementById ("Select1"),4Box2 = document.getElementById ("Select2"),5Box3 = document.getElementById ("Select3"),6V1 = 0,    7V2 = 0; 8 9         varA = [];Ten          for(vari=0;i<people.length;i++){ OneA.push (' <option id= ' + people[i].id + ' "> ' + people[i].name + ' </option> ')); A         } -box1.innerhtml = A.join ("); -  the         functionGetBook () { -  -             varA = []; -              for(vari=0;i<bookname[v1].length;i++){ +A.push (' <option id= ' + bookname[v1][i].id + ' "> ' + bookname[v1][i].name + ' </option> ')); -             } +box2.innerhtml = A.join ("); A         } at  -         functionGetauthor () { -             varresult = ' <option> ' + author[v1][v2]+ ' </option> '; -box3.innerhtml =result; -              -         } in  -         //Default Build to GetBook (); + Getauthor (); -  the         //Control linkage Generation *Box1.onchange=function(){ $V1 =Box1.selectedindex;Panax Notoginseng GetBook (); -V2 =Box2.selectedindex; the Getauthor (); +         }; A  theBox2.onchange=function(){ +V2 =Box2.selectedindex; - Getauthor (); $         } $     } -  -Linkage ();

Ideas:

My idea is to control the generation of the second drop-down list content by the Selectindex value of the first drop-down list, and to get the second Selectindex value to control the third one.

The second one controls the generation of the third content by its own Selectindex value, and so on.

In general, each drop-down list excludes the build that controls itself, and all other builds are controlled.

　

Simple pull-down list linkage implementation