标签：
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Province_three</title> <style> *{ margin: 0; padding: 0; list-style: none; font: 400 12px/1.5 Arial,"Lucida Grande",Verdana,"Microsoft YaHei"; } body{ padding: 50px; } select{ margin-right: 5px; } </style> </head> <body> <script> window.onload = function(){ // var aProvince = [ "浙江省", "江苏省", "广东省" ] var aCity = [ ["杭州市","宁波市","舟山市","温州市","绍兴市"], ["苏州市","南京市"], ["广州市","深圳市"] ] var aArea = [ [ ["滨江区","西湖区","上城区"], ["海曙区","江东区","鄞州区","江北区"], ["定海区"], ["温岭区"], ["柯桥区"] ], [ ["吴中区"], ["鼓楼区"] ], [ ["越秀区","海珠区"], ["宝安区","龙岗区"] ] ] //fn function fnAddOption(innerH,target,isClear){ var oOption = document.createElement("option"); oOption.value = innerH; oOption.innerHTML = innerH; //clearOptions if(isClear){ var tLength = target.children.length; for(var i=0; i<tLength; i++){ target.removeChild(target.children[0]); } } target.appendChild(oOption); } function fnGetProvince(ele,initP,initC,initA){ ele.innerHTML = ‘<select><option>--选择省--</option></select><select><option>--选择市--</option></select><select><option>--选择区--</option></select>‘; var oSelect1 = ele.getElementsByTagName("select")[0]; var oSelect2 = ele.getElementsByTagName("select")[1]; var oSelect3 = ele.getElementsByTagName("select")[2]; for(var i=0; i<aProvince.length; i++){ fnAddOption(aProvince[i],oSelect1); //initP if(typeof(initP)!="undefined" && initP == aProvince[i]){ oSelect1.getElementsByTagName("option")[i+1].setAttribute("selected",true); onchangeS1(); //initC if(typeof(initC)!="undefined"){ var oOptions = oSelect2.getElementsByTagName("option"); for(var j=0; j<oOptions.length; j++){ if(initC == oOptions[j].innerHTML){ oOptions[j].setAttribute("selected",true); onchangeS2(); //initA if(typeof(initA)!="undefined"){ var oOptions = oSelect3.getElementsByTagName("option"); for(var k=0; k<oOptions.length; k++){ if(initA == oOptions[k].innerHTML){ oOptions[k].setAttribute("selected",true); } } } } } } } //init end } //select1 onchange event function onchangeS1(){ var sIndex = oSelect1.selectedIndex; fnAddOption("--选择市--",oSelect2,true); fnAddOption("--选择区--",oSelect3,true); if(sIndex==0){ return; } for(var i=0; i<aCity[sIndex-1].length; i++){ fnAddOption(aCity[sIndex-1][i],oSelect2); } } oSelect1.onchange = onchangeS1; //select2 onchange event function onchangeS2(){ var sIndex = oSelect1.selectedIndex; var sCityIndex = oSelect2.selectedIndex; fnAddOption("--选择区--",oSelect3,true); if(sCityIndex==0){ return; } for(var i=0; i<aArea[sIndex-1][sCityIndex-1].length; i++){ fnAddOption(aArea[sIndex-1][sCityIndex-1][i],oSelect3); } } oSelect2.onchange = onchangeS2; } //get fn var oDiv = document.getElementById("div1"); fnGetProvince(oDiv,"广东省","深圳市","龙岗区"); } </script> <div id="div1"></div> </body> </html>
下面是二级省市选择：
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Province_Two</title> <style> *{ margin: 0; padding: 0; list-style: none; font: 400 12px/1.5 Arial,"Lucida Grande",Verdana,"Microsoft YaHei"; } body{ padding: 50px; } select{ margin-right: 5px; } </style> </head> <body> <script> window.onload = function(){ // var aProvince = [ "浙江省", "江苏省", "广东省" ] var aCity = [ ["杭州市","宁波市","舟山市","温州市","绍兴市"], ["苏州市","南京市"], ["广州市","深圳市"] ] //fn function fnAddOption(innerH,target){ var oOption = document.createElement("option"); oOption.value = innerH; oOption.innerHTML = innerH; target.appendChild(oOption); } function fnGetProvince(ele){ ele.innerHTML = ‘<select><option>--请选择--</option></select><select><option>--请选择--</option></select>‘; var oSelect1 = ele.getElementsByTagName("select")[0]; var oSelect2 = ele.getElementsByTagName("select")[1]; for(var i=0; i<aProvince.length; i++){ fnAddOption(aProvince[i],oSelect1); } //select onchange event oSelect1.onchange = function(){ var sIndex = oSelect1.selectedIndex; var sOption = oSelect1[sIndex]; oSelect2.innerHTML=""; if(sIndex==0){ fnAddOption("--请选择--",oSelect2); return; } for(var i=0; i<aCity[sIndex-1].length; i++){ fnAddOption(aCity[sIndex-1][i],oSelect2); } } } //get fn var oDiv = document.getElementById("div1"); fnGetProvince(oDiv); } </script> <div id="div1"></div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/sunbey/p/5209042.html
