Control functions that can be cascaded by any level selector

Requirements

Provide data 1:

[    {        text: ' First level '        value: ' 1 ',        list:[            {                text: ' Second level '                value: ' 1.1 ',                list:[                    {                        Text: ' Tertiary '                        value: ' 1.1.1 ', list:[]}, ...]}    ,    ...]

Data 2:

<pre name= "Code" class= "JavaScript" > Cascade selector elements list <span style= "font-family:arial, Helvetica, Sans-serif;" >selectlist, such as [Select1,select2,select3,...] </span>

"Critical Code"

function Cascade (Selectlist,data) {//Here SelectList a list of selector elements that cascade, such as [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);    Add Change Event Selectlist[i].addeventlistener ("Changes", function (event) {var value=event.target.value;    var v_p=value.split (".");    var v_length=v_p.length;      If it is the last select, jump out if (v_length>=selectlist.length) return;    Constructs a new selector var newselectlist=[];    for (Var j=v_length;j<selectlist.length;j++) Newselectlist.push (Selectlist[j]);    alert (newselectlist.length);    Constructs a new data 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);    }    ); }}//Update selectfunction fillselect (select,list) {select.innerhtml= ""; List.foreach (function (data) {VAR option=new option (Data.text,data.value); select.add (option);}); 

"Code Implementation"

<! DOCTYPE html>


 
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
 
Control functions that can be cascaded by any level selector