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

< 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>

转载于:https://www.cnblogs.com/newmin/archive/2009/08/04/1538816.html