【要求】
提供数据1：
[{text:'第一级'value:'1',list:[{text:'第二级'value:'1.1',list:[{text:'第三级'value:'1.1.1',list:[]},…]},…]},…]数据2：
<pre name="code" class="javascript">依次级联的选择器元素列表<span style="font-family: Arial, Helvetica, sans-serif;">selectList，如[select1,select2,select3,…]</span>
【关键代码】
function cascade(selectList,data){// 这里selectList为依次级联的选择器元素列表，如[select1,select2,select3,…]// TODOfor(var i=0;i<selectList.length;i++){var temp_data=data;for(var j=0;j<i;j++){temp_data=temp_data[0].list;}fillSelect(selectList[i],temp_data);//增加变更事件selectList[i].addEventListener("change",function(event){var value=event.target.value;var v_p=value.split(".");var v_length=v_p.length;//如果是最后一个select就跳出if(v_length>=selectList.length)return;//构造新的选择器var newSelectList=[];for(var j=v_length;j<selectList.length;j++)newSelectList.push(selectList[j]);//alert(newSelectList.length);//构造新的数据var newData=data;for(var j=0;j<v_p.length;j++){newData=newData[parseInt(v_p[j])-1].list;}console.log(newSelectList);console.log(newData);cascade(newSelectList,newData);});}}//更新selectfunction fillSelect(select,list){select.innerHTML="";list.forEach(function(data){var option=new Option(data.text,data.value);select.add(option);});}【代码实现】
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body> <select name="select1" id="select1"></select> <select name="select2" id="select2"></select> <select name="select3" id="select3"></select><p style="white-space:pre; font-size:1em; font-weight:bold;">data =[{text:"1",value:"1",list:[{text:"11",value:"1.1",list:[{text:"111",value:"1.1.1"},{text:"112",value:"1.1.2"},{text:"113",value:"1.1.3"}]},{text:"12",value:"1.2",list:[{text:"121",value:"1.2.1"},{text:"122",value:"1.2.2"}]}]},{text:"2",value:"2",list:[{text:"21",value:"2.1",list:[{text:"211",value:"2.1.1"},{text:"212",value:"2.1.2"},{text:"213",value:"2.1.3"}]},{text:"22",value:"2.2",list:[{text:"221",value:"2.2.1"},{text:"222",value:"2.2.2"}]}]}];</p></body></html><script>var data=[{text:"1",value:"1",list:[{text:"11",value:"1.1",list:[{text:"111",value:"1.1.1"},{text:"112",value:"1.1.2"},{text:"113",value:"1.1.3"}]},{text:"12",value:"1.2",list:[{text:"121",value:"1.2.1"},{text:"122",value:"1.2.2"}]}]},{text:"2",value:"2",list:[{text:"21",value:"2.1",list:[{text:"211",value:"2.1.1"},{text:"212",value:"2.1.2"},{text:"213",value:"2.1.3"}]},{text:"22",value:"2.2",list:[{text:"221",value:"2.2.1"},{text:"222",value:"2.2.2"}]}]}];var select1=document.getElementById("select1");var select2=document.getElementById("select2");var select3=document.getElementById("select3");var selectList=[select1,select2,select3];cascade(selectList,data);function cascade(selectList,data){// 这里selectList为依次级联的选择器元素列表，如[select1,select2,select3,…]// TODOfor(var i=0;i<selectList.length;i++){var temp_data=data;for(var j=0;j<i;j++){temp_data=temp_data[0].list;}fillSelect(selectList[i],temp_data);//增加变更事件selectList[i].addEventListener("change",function(event){var value=event.target.value;var v_p=value.split(".");var v_length=v_p.length;//如果是最后一个select就跳出if(v_length>=selectList.length)return;//构造新的选择器var newSelectList=[];for(var j=v_length;j<selectList.length;j++)newSelectList.push(selectList[j]);//alert(newSelectList.length);//构造新的数据var newData=data;for(var j=0;j<v_p.length;j++){newData=newData[parseInt(v_p[j])-1].list;}console.log(newSelectList);console.log(newData);cascade(newSelectList,newData);});}}//更新selectfunction fillSelect(select,list){select.innerHTML="";list.forEach(function(data){var option=new Option(data.text,data.value);select.add(option);});}</script>
版权声明：本文为博主原创文章，，未经博主允许不得转载。
开始的时侯，我们就知道，总会有终结。
