【要求】
提供數據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>