标签：
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值去控制第三个内容的生成，依次类推。
总的来说，每个下拉列表排除控制自身的生成，都会控制所有其它的生成。
标签：
原文地址：http://www.cnblogs.com/HCJJ/p/5065472.html
