這個是一個同事寫的,我看着有用,就cv下來了.
程序功能主要邏輯是:
1.當一級標簽市顯示默認狀態 '-請選擇-'時,二級標簽要隱藏
2.一級標簽選中城市時,二級標簽顯示在頁面,並列出響應市區
3.當一級標簽選回默認狀態時,二級標簽隱藏
<!DOCTYPE HTML> <html> <head> <title>城市二級聯動列表</title> <meta charset="utf-8" /> <style> .hide{ display: none; } </style> </head> <body> <select name="provs"> <option>—請選擇—</option><!--0--> <option>北京市</option><!--1--> <option>天津市</option> <option>河北省</option> </select> <select name="cities" class="hide"> </select> <script> /*實現“省”和“市”的級聯下拉列表*/ var cities=[ [{"name":'東城區',"value":101}, {"name":'西城區',"value":102}, {"name":'海淀區',"value":103}, {"name":'朝陽區',"value":104}],//0 [{"name":'河東區',"value":201}, {"name":'河西區',"value":202}, {"name":'南開區',"value":303}], [{"name":'石家庄市',"value":301}, {"name":'廊坊市',"value":302}, {"name":'保定市',"value":303}, {"name":'唐山市',"value":304}, {"name":'秦皇島市',"value":304}] ]; //查找兩個select var selProvs= document.getElementsByName( "provs" )[0]; var selCts= document.getElementsByName( "cities" )[0]; //為selProvs綁定選中項改變事件 selProvs.onchange=function(){ //獲得當前select選中項的下標 var i=this.selectedIndex; if(i>0){ //獲得cities數組中i-1位置的子數組 var cts=cities[i-1]; //清空selCts的內容: selCts.innerHTML=""; //創建文檔片段 var frag= document.createDocumentFragment(); //創建一個option，內容為-請選擇-,追加到selCts下 var opt= document.createElement("option"); opt.innerHTML="-請選擇-"; frag.appendChild(opt); //遍歷cts中每個城市 for(var i=0;i<cts.length;i++){ //創建一個option，設置其內容為當前城市的name屬性，設置其value為當前城市的value屬性,追加到selCts中 var opt= document.createElement("option"); //cts[i]: // {"name":'東城區',"value":101} opt.innerHTML=cts[i]["name"]; opt.value=cts[i]["value"]; frag.appendChild(opt); } //將frag整體追加到selCts中 selCts.appendChild(frag); //清除selCts的class selCts.className=""; }else selCts.className="hide"; } </script> </body> </html>