【要求】
提供数据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);
}
);
}
}
//更新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>版权声明：本文为博主原创文章，未经博主允许不得转载。
原文地址：http://blog.csdn.net/willspace/article/details/46861135
