原生js实现任意级选择器级联的控件

实现以下数据格式的任意级选择器级联的控件
[
    {
        text:'第一级'
        value:'1',
        list:[
            {
                text:'第二级'
                value:'1.1',
                list:[
                    {
                        text:'第三级'
                        value:'1.1.1',
                        list:[]
                    },
                    ...
                ]
            },
            ...
        ]
    },
    ...
]

var data = [
{
	text:'1',value:'1',list:[
	{
		text:'1.1',value:'1.1',list:[
		{
			text:'1.1.1',value:'1.1.1',list:[
				{text: '1.1.1.1',value:'1.1.1.1'},
				{text: '1.1.1.2',value:'1.1.1.2'},
				{text: '1.1.1.3',value:'1.1.1.3'},
				{text: '1.1.1.4',value:'1.1.1.4'},
			]
		},
		{
			text:'1.1.2',value:'1.1.2',list:[
				{text: '1.1.2.1',value:'1.1.2.1'},
				{text: '1.1.2.2',value:'1.1.2.2'},
				{text: '1.1.2.3',value:'1.1.2.3'},
				{text: '1.1.2.4',value:'1.1.2.4'},
			]
		},
		{
			text:'1.1.3',value:'1.1.3',list:[
				{text: '1.1.3.1',value:'1.1.3.1'},
				{text: '1.1.3.2',value:'1.1.3.2'},
				{text: '1.1.3.3',value:'1.1.3.3'},
				{text: '1.1.3.4',value:'1.1.3.4'},
			]
		}]
	},
	{
		text:'1.2',value:'1.2',list:[
		{
			text:'1.2.1',value:'1.2.1',list:[
				{text: '1.2.1.1',value:'1.2.1.1'},
				{text: '1.2.1.2',value:'1.2.1.2'},
				{text: '1.2.1.3',value:'1.2.1.3'},
				{text: '1.2.1.4',value:'1.2.1.4'},
			]
		},
		{
			text:'1.2.2',value:'1.2.2',list:[
				{text: '1.2.2.1',value:'1.2.2.1'},
				{text: '1.2.2.2',value:'1.2.2.2'},
				{text: '1.2.2.3',value:'1.2.2.3'},
				{text: '1.2.2.4',value:'1.2.2.4'},
			]
		},
		{
			text:'1.2.3',value:'1.2.3',list:[
				{text: '1.2.3.1',value:'1.2.3.1'},
				{text: '1.2.3.2',value:'1.2.3.2'},
				{text: '1.2.3.3',value:'1.2.3.3'},
				{text: '1.2.3.4',value:'1.2.3.4'},
			]
		}]
	}]
},
{
	text:'2',value:'2',list:[
	{
		text:'2.1',value:'2.1',list:[
		{
			text:'2.1.1',value:'2.1.1',list:[
				{text: '2.1.1.1',value:'2.1.1.1'},
				{text: '2.1.1.2',value:'2.1.1.2'},
				{text: '2.1.1.3',value:'2.1.1.3'},
				{text: '2.1.1.4',value:'2.1.1.4'},
			]
		},
		{
			text:'2.1.2',value:'2.1.2',list:[
				{text: '2.1.2.1',value:'2.1.2.1'},
				{text: '2.1.2.2',value:'2.1.2.2'},
				{text: '2.1.2.3',value:'2.1.2.3'},
				{text: '2.1.2.4',value:'2.1.2.4'},
			]
		},
		{
			text:'2.1.3',value:'2.1.3',list:[
				{text: '2.1.3.1',value:'2.1.3.1'},
				{text: '2.1.3.2',value:'2.1.3.2'},
				{text: '2.1.3.3',value:'2.1.3.3'},
				{text: '2.1.3.4',value:'2.1.3.4'},
			]
		}]
	},
	{
		text:'2.2',value:'2.2',list:[
		{
			text:'2.2.1',value:'2.2.1',list:[
				{text: '2.2.1.1',value:'2.2.1.1'},
				{text: '2.2.1.2',value:'2.2.1.2'},
				{text: '2.2.1.3',value:'2.2.1.3'},
				{text: '2.2.1.4',value:'2.2.1.4'},
			]
		},
		{
			text:'2.2.2',value:'2.2.2',list:[
				{text: '2.2.2.1',value:'2.2.2.1'},
				{text: '2.2.2.2',value:'2.2.2.2'},
				{text: '2.2.2.3',value:'2.2.2.3'},
				{text: '2.2.2.4',value:'2.2.2.4'},
			]
		},
		{
			text:'2.2.3',value:'2.2.3',list:[
				{text: '2.2.3.1',value:'2.2.3.1'},
				{text: '2.2.3.2',value:'2.2.3.2'},
				{text: '2.2.3.3',value:'2.2.3.3'},
				{text: '2.2.3.4',value:'2.2.3.4'},
			]
		}]
	}]
}];
var selecters = document.getElementsByTagName("select");

function cascade(selectList,data){
	function Selecter(selectList,data){
		this.selectList = selectList;
		this.length = selectList.length;
		this.list = data;
		this.init();
		this.fillSelect(this.selectList[0],this.list);
	}

	//构造函数初始化，给每一个select标签安装change监听器
	Selecter.prototype.init = function (){
		for(var i = 0; i < this.length; i++){
			this.selectList[i].addEventListener('change',
				function(index){
					this.event(index);
				}.bind(this,i)
			);
		}
	}

	//给select标签增加option
	Selecter.prototype.fillSelect = function (select,list){
		list.forEach(function(data){
			var option = new Option(data.text,data.value);
			select.add(option);
		});
	}

	//实现监听事件
	Selecter.prototype.event = function(index){
		this.remove(index);
		this.reselect(index);
		if(index < this.length - 1){
			index += 1;
		}

		this.fillSelect(this.selectList[index],this.list);
	}

	//当某一级select发生改变时，删除后代级select的option
	Selecter.prototype.remove = function(index){
		for(var j = index + 1; j < this.length; j++){
			for(var i = this.selectList[j].length - 1; i > 0; i--){
				this.selectList[j].remove(i);
			}
		}
	}

	//当改变前面的select时，将数据定位到改变的select
	Selecter.prototype.reselect = function(index){
		this.list = data;
		for(var i = 0; i < index + 1; i++){
			this.index = this.selectList[i].selectedIndex;
			if(this.list[this.index -1]){
				this.list = this.list[this.index-1];
			}
			this.list = this.list.list || [];
		}
	}
	//创建Selecter的实例
	var selecter = new Selecter(selectList,data);
}
cascade(selecters,data);

	
 
	


	
 

		
   --- 
		
   --- 
		
   --- 
		
   ---