轻松实现二级无刷新联动菜单

<select id="cate1"></select>
<select id="cate2"></select>
<input name="CategoryID" id="categoryid" />
<script type="text/javascript">
var cateData=[{id:'1',name:'计算机',child:[{id:'1',name:'程序设计'}]},{id:'2',name:'语言培训',child:[{id:'2',name:'英语培训'},{id:'3',name:'日语'}]}];

var pCate=document.getElementById('cate1');
var cCate=document.getElementById('cate2');

for(var i=0;i<cateData.length;i++){
    var op=document.createElement("option");
    op.appendChild(document.createTextNode(cateData[i].name));
    op.setAttribute("value",cateData[i].id);
    pCate.appendChild(op);
}
//填充默认子下拉菜单
addOptions(0);

//填充指定索引的选项
function addOptions(index){
    //清空所有子分类       
    cCate.innerHTML=null;
    var cData=cateData[index].child;//获取子分类
     for(var i=0;i<cData.length;i++){
        var op=document.createElement("option");
        op.appendChild(document.createTextNode(cData[i].name));
        op.setAttribute("value",cData[i].id);
        cCate.appendChild(op);
    }
}
pCate.onchange=function(){addOptions(this.selectedIndex);}
cCate.onchange=function(){
    document.getElementById('CategoryID').value=
        pCate.options[pCate.selectedIndex].value+"-"+
        cCate.options[cCate.selectedIndex].value;
}
</script>