级联下拉列表

前不久有一个朋友问我有没有现成的级联下拉列表实现（虽然建议他自己写一个，但我还是又写了一遍），应用中经常会用到，google或baidu一下其实就有许多好例子。虽然如此，也希望自己能为程式世界尽点微博之力，贴出一段实现二层级联的javascript代码，希望能对有此需求的人有所帮助，谢谢。

<script type="text/javascript">
//第二级：
var secondlayer1=
[
{value:"second_1_xxx1", text:"second_1_xxxx1"},
{value:"second_1_xxx2", text:"second_1_xxxx1", selected:true},
{value:"second_1_xxx3", text:"second_1_xxxx2"},
{value:"second_1_xxx4", text:"second_1_xxxx3"}
];
var secondlayer2=
[
{value:"second_2_xxx1", text:"second_2_xxxx1"},
{value:"second_2_xxx2", text:"second_2_xxxx1"},
{value:"second_2_xxx3", text:"second_2_xxxx2", selected:true},
{value:"second_2_xxx4", text:"second_2_xxxx3"}
];
var secondlayer3=
[
{value:"second_3_xxx1", text:"second_3_xxxx1"},
{value:"second_3_xxx2", text:"second_3_xxxx1", selected:true},
{value:"second_3_xxx3", text:"second_3_xxxx2"},
{value:"second_3_xxx4", text:"second_3_xxxx3"}
];
var secondlayer4=
[
{value:"second_4_xxx1", text:"second_4_xxxx1"},
{value:"second_4_xxx2", text:"second_4_xxxx1"},
{value:"second_4_xxx3", text:"second_4_xxxx2"},
{value:"second_4_xxx4", text:"second_4_xxxx3", selected:true}
];

//第一级：
var toplayer=
[
{value:"xxx1", text:"xxxx1", next:secondlayer1},
{value:"xxx2", text:"xxxx2", next:secondlayer2},
{value:"xxx3", text:"xxxx3", next:secondlayer3, selected:true},
{value:"xxx4", text:"xxxx4", next:secondlayer4}
];

var topElcr;    //toplayerSelector;
var secondElcr; //secondlayerSelector;
window.onload=function(){
topElcr = document.getElementById("toplayerSelector");
secondElcr = document.getElementById("secondlayerSelector");

/* 构建第一层 */
for(var i in toplayer){
var o = toplayer[i];
var opt = new Option(o.text,o.value);
opt.selected=o.selected?true:false;
topElcr.options.add(opt);
}

/* 构建默认选中的下一层 */
selectAndBuildNextLayer();
}

function selectAndBuildNextLayer(){
var opts = secondElcr.options;
/* 清除第二层数据 */
for(var i=opts.length-1;i>=1;i--)opts[i]=null;

var index = topElcr.selectedIndex-1;
/* 如果没有选择任何项目，返回 */
if(index<0)return;

/* 构建下一层 */
var secondlayer = toplayer[index].next;
for(var i in secondlayer){
var o = secondlayer[i];
var opt = new Option(o.text,o.value);
opt.selected=o.selected?true:false;
opts.add(opt);
}
}
</script>
<select id="toplayerSelector" name="toplayerSelector" onchange="selectAndBuildNextLayer()">
<option value="">请选择...</option>
</select>

<select id="secondlayerSelector" name="secondlayerSelector">
<option value="">请选择...</option>
</select>

第一级（toplayer）要放在第二级的下面，next属性才能正常复制。

每一层的数据全是标准JSON格式数据，可很方便的修改来通过AJAX从服务器动态取出下一级数据，而且稍加修改就可支持3联或N联。