<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>js特效—省市级联</title> <script> //定义省级数组 var pArray=new Array("北京","上海","天津","山东"); //定义市级数组 var cArray=new Array(); cArray[0]=new Array("东城","西城","从文","宣武","朝阳","丰台"); cArray[1]=new Array("黄埔","鹿王","长宁","静安","普陀","虹口"); cArray[2]=new Array("北辰","南开","河西","河东","东丽","和平"); cArray[3]=new Array("济南","青岛","烟台","潍坊","济宁","泰安"); //初始化 function init(){ var province=document.getElementById("province"); for(var i=0;i<pArray.length;i++){ var option=document.createElement("option"); option.value=pArray[i]; option.text=pArray[i]; province.options.add(option); } } function show(){ var province=document.getElementById("province"); var city=document.getElementById("city"); var pSelectedIndex=province.selectedIndex-1; var result=document.getElementById("result"); if(pSelectedIndex<0){ result.innerText=""; } else{ result.innerText=pArray[pSelectedIndex]; var cSelectedIndex=city.selectedIndex-1; if(cSelectedIndex>=0){ result.innerText+=","+cArray[pSelectedIndex][cSelectedIndex]; } } } function selectProvince(){ var province=document.getElementById("province"); var city=document.getElementById("city"); var pSelectedIndex=province.selectedIndex-1; for(var i=city.options.length-1;i>0;i--){ city.options.remove(i); } if(pSelectedIndex>=0){ for(var i=0;i<cArray[pSelectedIndex].length;i++){ var option=document.createElement("option"); option.value=cArray[pSelectedIndex][i]; option.text=cArray[pSelectedIndex][i]; city.options.add(option); } } show(); } </script> </head> <body onLoad="init()" style="font-size:12px;"> <form> 省份：<select id="province" onChange="selectProvince()"> <option value="">请选择省份</option> </select> <br> 城市：<select id="city" onChange="show()"> <option value="">请选择城市</option> </select> <br><br> 你的选择结果是：<span id="result" style="color:red;"></span></form> </body> </html>