二級聯動列表
阿新 • • 發佈：2018-11-16
<!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}], [{"name":'河東區',"value":201}, {"name":'河西區',"value":202}, {"name":'南開區',"value":203}], [{"name":'石家莊市',"value":301}, {"name":'廊坊市',"value":302}, {"name":'保定市',"value":303}, {"name":'唐山市',"value":304}, {"name":'秦皇島市',"value":305}] ]; //1.獲取觸發事件的元素 var selProvs=document.getElementsByName("provs")[0]; //2.繫結觸發事件 selProvs.onchange=function(){ var selProvs=this; var i=selProvs.selectedIndex;//獲得當前選中項 var arr=cities[i-1]; //console.log(arr); if(i>0){ var selCts=document.getElementsByName("cities")[0]; //建立文件片段物件 var frag=document.createDocumentFragment(); //3.修改元素 //建立一個(請選擇)的元素 var opt=new Option("--請選擇--"); frag.appendChild(opt); for (var c of arr){ console.log(c); //建立option元素新增,value和name var option=new Option(c.name,c.value); //將option元素新增到文件片段物件中 frag.appendChild(option); } //將文件片段一次性新增到DOM樹上 //每次追加元素的時候清空內容 selCts.innerHTML=""; selCts.appendChild(frag); //將class屬性去掉(去掉class樣式中的dispan=none); selCts.className=""; }else{ selCts.className="hide"; } } </script> </body> </html>
效果:
