<!DOCTYPE HTML> <html> <head> <title>聯動菜單</title> <meta charset="utf-8" /> <script> /*使用 HTML DOM 的方式實現聯動菜單*/ var categories=[ {"id":10,"name":'男裝',"children":[ {"id":101,"name":'正裝'}, {"id":102,"name":'T恤'}, {"id":103,"name":'褲衩'} ]}, {"id":20,"name":'女裝',"children":[ {"id":201,"name":'短裙'}, {"id":202,"name":'連衣裙'}, {"id":203,"name":'褲子',"children":[ {"id":2031,"name":'長褲'}, {"id":2031,"name":'九分褲'}, {"id":2031,"name":'七分褲'} ]}, ]}, {"id":30,"name":'童裝',"children":[ {"id":301,"name":'帽子'}, {"id":302,"name":'套裝',"children":[ {"id":3021,"name":"0-3歲"}, {"id":3021,"name":"3-6歲"}, {"id":3021,"name":"6-9歲"}, {"id":3021,"name":"9-12歲"} ]}, {"id":303,"name":'手套'} ]} ]; function createSel(cts){//傳入包含一組類別對象的數組 //創建select元素，保存在變量sel中 var sel=document.createElement("select"); //向sel添加一個新option，設置內容為"-請選擇-",值為-1 sel.add(new Option("-請選擇-",-1)); //遍歷cts中的每個類別對象 for(var i=0;i<cts.length;i++){ //向sel中添加一個新option，設置內容為當前類別的內容，設置值為當前類別的id sel.add(new Option(cts[i].name,cts[i].id)); }//(遍歷結束) //cts:[{男裝,},{女裝,},{童裝,children:[{sub1},...] // i-1 sel.onchange=function(){//this->sel //獲得當前sel選中項的下標，保存在變量i中 var i=this.selectedIndex; //獲得cts中下標為i-1位置的子類型對象,保存在cate中 var cate=cts[i-1]; //反復刪除category下的最后一個子節點，直到category的最后一個子節點就是當前sel時，退出循環 while(category.lastChild!=this){ category.removeChild(category.lastChild); } if(cate.children){//如果cate有children屬性 //調用createSel，傳入cate的children數組作為參數 createSel(cate.children); } } //將sel追加到id為category的元素中 category.appendChild(sel); } window.onload=function(){ createSel(categories); } </script> </head> <body> <div id="category"></div> </body> </html>
var data = { "province": ["廣東省","山東省","西安"], "city":{ "廣東省":["韶關市1","韶關市2","韶關市3","韶關市4","韶關市"], "山東省":["韶關市","韶關市","韶關市","韶關市","韶關市"], "西安":["韶關市66","韶關市77","韶關市88","韶關市99","韶關市"], } } var Pro1=''; for(var i=0;i<data.province.length;i++){ Pro1+='<option value="">'+data.province[i]+'</option>'; } $("#province").on('change',function(){ var oCity=document.getElementById('city'); oCity.innerHTML='<option>市</option>'; var City1=''; var City2=$('#province').children('option:selected').text(); for(var city_1 in data.city){ if(City2==city_1){ for(var i=0;i<data.city[city_1].length;i++){ City1+='<option value="">'+ data.city[city_1][i] +'</option>'; } $('#city').append(City1); } } }) $('#province').append(Pro1);