简单的下拉列表联动实现

HTML结构：

1     <select name="" id="select1"></select>
2     <select name="" id="select2"></select>
3     <select name="" id="select3"></select>

Data代码：

 1     var people = [
 2         {"id":"p1","name":"科幻小说"},
 3         {"id":"p2","name":"奇幻小说"},
 4         {"id":"p3","name":"历史架空"}
 5     ];
 6     var bookName = [
 7         [
 8             {"id":"kh1","name":"大宇宙时代"},
 9             {"id":"kh2","name":"星际战舰"},
10             {"id":"kh3","name":"地球纪元"}
11         ],
12         [
13             {"id":"qh1","name":"巫师之旅"},
14             {"id":"qh2","name":"完美世界"}
15         ],
16         [
17             {"id":"jk1","name":"清末英雄"},
18             {"id":"jk2","name":"1852铁血中华"}
19         ]
20     ];
21     var author = [
22         ["zhttty","彩虹之门","彩虹之门2"],
23         ["一行白鹭上青天","辰东"],
24         ["贰零肆柒","绯红之月"]
25     ];

JS代码：

 1     function linkage(){
 2
 3         var box1 = document.getElementById("select1"),
 4             box2 = document.getElementById("select2"),
 5             box3 = document.getElementById("select3"),
 6             v1 = 0,
 7             v2 = 0;
 8
 9         var A = [];
10         for(var i=0;i<people.length;i++){
11             A.push(‘<option id="‘+ people[i].id +‘">‘+ people[i].name +‘</option>‘);
12         }
13         box1.innerHTML = A.join(‘‘);
14
15         function getBook(){
16
17             var a = [];
18             for(var i=0;i<bookName[v1].length;i++){
19                 a.push(‘<option id="‘+ bookName[v1][i].id +‘">‘+ bookName[v1][i].name +‘</option>‘);
20             }
21             box2.innerHTML = a.join(‘‘);
22         }
23
24         function getAuthor(){
25             var result = ‘<option>‘+ author[v1][v2]+‘</option>‘;
26             box3.innerHTML = result;
27
28         }
29
30         // 默认生成
31         getBook();
32         getAuthor();
33
34         //控制联动生成
35         box1.onchange=function(){
36             v1 = box1.selectedIndex;
37             getBook();
38             v2 = box2.selectedIndex;
39             getAuthor();
40         };
41
42         box2.onchange=function(){
43             v2 = box2.selectedIndex;
44             getAuthor();
45         }
46     }
47
48 linkage();

思路：

　　我的思路就是通过第一个下拉列表的selectIndex值来控制第二个下拉列表内容的生成，并在获取第二个selectIndex值去控制第三个。

　　而第二个则控制通过自身的selectIndex值去控制第三个内容的生成，依次类推。

总的来说，每个下拉列表排除控制自身的生成，都会控制所有其它的生成。