可支持任意级选择器级联的控件函数

来源：互联网发布：手机淘宝更改会员名编辑：程序博客网时间：2024/06/03 14:51

【要求】

提供数据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);    }    );    }    }//更新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>

0 0