【前端学习笔记】可支持任意级选择器级联的控件案例
<!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>
</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 selectData = data;
//填充每个选择框
for(var j=0;j<i;j++){
selectData = selectData[0].list;
}
fillSelect(selectList[i],selectData);
//选择框变动事件
selectList[i].addEventListener('change',function(event){
var targetStr = event.target.value;
var reg = /\d+/g;
var arr = targetStr.match(reg);
var num = arr.length;
if(num >= selectList.length){
return;
}
//获取需要变动的选择框
var newSeclectList = [];
for(var k = num;k < selectList.length; k++){
newSeclectList.push(selectList[k]);
}
//获取需要变动的数据
var newData = data;
for(var z=0; z<num; z++){
newData = newData[parseInt(arr[z]-1)].list;
}
cascade(newSeclectList,newData);
});
}
}
//更新select
function fillSelect(select,list){
select.innerHTML = '';
list.forEach(function(item){
var option = new Option(item.text,item.value);
select.add(option);
});
}
</script>
