可支援任意級選取器級聯的控制項函數

標籤：前端   html   js   級聯   

【要求】

提供資料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,...]    // 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);    }    );    }    }//更新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,...]    // 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);    }    );    }    }//更新selectfunction fillSelect(select,list){select.innerHTML="";list.forEach(function(data){var option=new Option(data.text,data.value);select.add(option);});}</script>

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

可支援任意級選取器級聯的控制項函數