可支援任意級選擇器級聯的控制元件函式
阿新 • • 發佈：2019-02-20
【要求】
提供資料1：
任意級的json陣列
[ { text:'第一級' value:'1', list:[ { text:'第二級' value:'1.1', list:[ { text:'第三級' value:'1.1.1', list:[] }, ... ] }, ... ] }, ... ]
資料2：
一個存放響應選擇器的陣列
selectList=[select1,select2,select3···];【關鍵程式碼】
function cascade(selectList,data){ // 這裡selectList為依次級聯的選擇器元素列表，如[select1,select2,select3,...] // TODO for(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); } ); } } //更新select function 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,...] // TODO for(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); } ); } } //更新select function fillSelect(select,list){ select.innerHTML=""; list.forEach(function(data){ var option=new Option(data.text,data.value); select.add(option); }); } </script>