<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>省市级联</title> <script type="text/javascript"> // 声明数组 var cityList = new Array(); // 为arr数组赋值 cityList['浙江省'] = ['杭州市','温州市','衢州市','台州市']; cityList['江苏省'] = ['南京市','苏州']; cityList['安徽省'] = ['合肥市','蚌埠','黄山','阜阳']; cityList['江西省'] = ['南昌市','上饶']; cityList['黑龙江省'] = ['哈尔滨市','佳木斯','龙江']; // 循环遍历 for(var i in cityList) { for(var j in cityList[i]) { //alert(arr[i][j]); } } // 默认将数组的下标(所有省份)绑定到显示省份的下拉列表框中 function allCity() { // 获取显示省份的下拉列表框对象 var sheng = document.getElementById("sheng"); // 循环数组,将每个下标添加到下拉列表框中作为项显示 for(var i in cityList) { // 每次循环添加一个新的项到下拉列表框中 // 第一个参数是要添加的项>>>括号中第一个值是显示值>>>第二个值是实际值 // 第二个参数是要将该项添加到哪一项的前面 sheng.add(new Option(i,i),null); } } // 每当改变省份下拉列表中的项的值时,调用该方法,重新绑定城市下拉列表中的项 function changeCity() { // 获取省份和城市下拉列表框的对象 var sheng = document.getElementById("sheng").value; var city = document.getElementById("city"); // 清空城市列表中的项 city.options.length = 0; // 循环省市数组 for(var i in cityList) { // 获取与选中省份相同的下标 if(i == sheng) { // 循环当前下标的内容的集合 for(var j in cityList[i]) { // 向城市列表中添加获取到的指定城市项 city.add(new Option(cityList[i][j],cityList[i][j]),null); } } } // 如果没有选择省份 if(sheng == '--请选择--') { // 城市绑定请选择 city.add(new Option('--请选择--','--请选择--'),null); } } // 窗体加载时调用allCity方法 window.onload = allCity; </script> </head> <body> 地址: <select id="sheng" οnchange="changeCity()"> <option>--请选择--</option> </select> <select id="city"> <option>--请选择--</option> </select> </body> </html>