如何用原生JS编写支持任意级选择器的级联下拉菜单？

本文共计1019个文字，预计阅读时间需要5分钟。

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

gistfile1.txt

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

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); index.html

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