效果图：
注意点：
json中的key必须有规律可寻；
面向对象的方式去完成。构造函数对每一个小功能的结合；
//面向对象方式 window.onload = function() { var s1 = new Sel("div1"); //数据加载 key值有规律 s1.add("0", ["1", "2", "3"]) //一级 s1.add("0_0", ["1_1", "1_2", "1_3"]) //二级 s1.add("0_0_0", ["1_1_1", "1_1_2", "1_1_3"]) //三级 s1.add("0_0_1", ["1_2_1", "1_2_2", "1_2_3"]) //三级 s1.add("0_0_2", ["1_3_1", "1_3_2", "1_3_3"]) //三级 s1.add("0_1", ["2_1", "2_2", "2_3"]) //二级 s1.add("0_1_0", ["2_1_1", "2_1_2", "2_1_3"]) //三级 s1.add("0_1_1", ["2_2_1", "2_2_2", "2_2_3"]) //三级 s1.add("0_1_2", ["2_3_1", "2_3_2", "2_3_3"]) //三级 s1.add("0_2", ["3_1", "3_2", "3_3"]) //二级 s1.add("0_2_0", ["3_1_1", "3_1_2", "3_1_3"]) //三级 s1.add("0_2_1", ["3_2_1", "31_2_2", "3_2_3"]) //三级 s1.add("0_2_2", ["3_3_1", "3_3_2", "3_3_3"]) //三级 s1.init(3); } //创建构造函数 function Sel(id) { this.oParent = document.getElementById(id); this.data = {}; //全局属性 方法下获取所有select this.aSel = this.oParent.getElementsByTagName("select"); } //用json key value属性关联起来 Sel.prototype = { //初始化 init: function(num) { var This = this; //改变this指向 由osel对象 指向 下拉菜单; for (var i = 1; i <= num; i++) { var oSel = document.createElement("select"); var oPt = document.createElement("option"); oPt.innerHTML = '默认'; oSel.index = i; //增加索引 oSel.appendChild(oPt); this.oParent.appendChild(oSel); //onchange事件改变的时候 第二个下拉菜单才改变 oSel.onchange = function() { This.change(this.index); } } //默认第一个下拉菜单 this.first(); }, add: function(key, value) { this.data[key] = value; }, //根据数组数据的多少来创建子项 first: function() { var arr = this.data[0]; for (var i = 0; i < arr.length; i++) { var oPt = document.createElement("option"); oPt.innerHTML = arr[i]; //接下去添加第一个下拉菜单 this.aSel[0].appendChild(oPt); } }, change: function(iNow) { //当传1 表示 第一个下拉菜单 传2 表示第二个下拉菜单 var str = "0"; //当传入1的时候要改变第二项内容的值。以此类推 for (var i = 0; i < iNow; i++) { //alert(this.aSel[i].selectedIndex) str += "_" + (this.aSel[i].selectedIndex - 1); console.log(this.data[str]); } if (!!this.data[str]) { var arr = this.data[str]; this.aSel[iNow].length = 1; //只能一组存在 其他删除 for (var i = 0; i < arr.length; i++) { var oPt = document.createElement("option"); oPt.innerHTML = arr[i]; //接下去添加第一个下拉菜单 this.aSel[iNow].appendChild(oPt); //为什么是inow 不是 str str是 0_1 inow是数字 } //默认下拉第一个框 使得第二个框跳过“默认”自动变为数据； this.aSel[iNow].options[1].selected = true; iNow++; if (iNow < this.aSel.length) { this.change(iNow); } } else { if (this.aSel[0].selectedIndex == 0) { if (iNow < this.aSel.length) { this.aSel[iNow].options.length = 1; this.aSel[iNow + 1].options.length = 1; } } else { if (iNow < this.aSel.length) { this.aSel[iNow].options.length = 1; } } } } }
技巧细节：
1.
s1.add("0", ["1", "2", "3"]) ======》》》》》
add: function(key, value) {
this.data[key] = value;
},
2.
//默认下拉第一个框 使得第二个框跳过“默认”自动变为数据；
this.aSel[iNow].options[1].selected = true;
3.
//默认长度变为1 类似与 remove删除option其他元素保留第一个元素（代码简洁）
this.aSel[iNow].options.length = 1;
4.面向对象写法初级模式
var S1 = new Sel（“父级元素”）
构造函数
onload = fun()
{
s1.init()//初始化
}
function Sel(){
获取父级
}
sel.prop
{
init: 默认配置，
first：
change：
}