applezqp

必须承认我没有写出这个效果，思维很混乱。主要原因是我逻辑没有理清，这是重点，而后又在一些细节上纠结，使我一直觉得这个问题很复杂。对待一个问题，要先把它想得复杂——全面考虑问题，然后简单——理清思路，最后再复杂——注重细节。强调，逻辑分析很重要。

上网查看了一些代码，整理了两种方法，绝对不是原创。主要差别是在数据结构上。

方法一：array存储，Demo

方法二：json存储，Demo

一，背景知识–Select

这个问题主要处理对象是select，即对增加、删除select的option选项等。

1. 清空select

sel.length=0; 或 sel.options.length=0;   //两种写法都一样

2.添加option

（1.新建

var opt = document.createElement('option');
或 var opt = new Option(str, str);

（2.添加

try{
    sel.add(opt, null);    //IE6,7不支持  
}catch(ex){
    sel.add(opt);
}
或sel.appendchild(opt);
或sel.options.add(opt);//都能识别,不知道是否标准

3. 选中

获取：sel.selectedIndex, 返回数值，默认为0；设置：sel.options[i].selected= true/false。

二，关键点

这个问题概括为获取数据，填充数据，即两重循环。选择一个选项，则用通过循环获得和该选项相关联的数据；遍历之后的select，填充相应的数据。这里数据结构是关键，不同的数据结构就决定了读取的效率。个人觉得方法一的效率比较高。

方法一采用数组结构，更为准确的说法，是关联数组，最为巧妙的地方在于索引值的设计。通过遍历select，获得当前select的被选项目的索引号，并连成字符串，例如“1_1_1”，则通过array['1_1_1']就可以获取所需的数据。

方法二采用的是json结构，这种结构值得推荐。但在获取数据时，要遍历整个数组里的json对象，通过对比选中的select的value值和json对象的’val’属性值，以获取下级的数据。数据量较大时，这个方法确实不太好。

这两种方法，还有一些细节也不太相同，比较繁琐就不介绍了。不过被我重写后，有些代码也不够优雅，而且我希望这个控件可以提供较好的数据输入的接口，继续纠结中……