关于级联下拉列表的几个不同的程序.docVIP

级联下拉列表的几个程序 级联下拉列表是为了实现的功能类似于下图: 方法1 !DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN /TR/html4/loose.dtd meta http-equiv Content-Type content text/html; charset UTF-8 DOMTest01-document style type text/css script type text/javascript var proArr new Array ; proArr[0] [东城区,西城区,朝阳区,海淀区];//北京 proArr[1] [静安区,浦东区,浦西区,徐汇区];//上海 proArr[2] [河东区,河西区,南开区];//天津 proArr[3] [石家庄市,廊坊市,三河市];//河北 function changeCity //1.获取对象 var proEle document.getElementById province ; var cityEle document.getElementById city ; //2.将以前的城市清0 cityEle.length 1; //3.获取省份的提交值 var proVal proEle.value; //4.根据省份的值,来决定城市的值 for var i 0;i proArr[proVal].length;i++ var optEle new Option proArr[proVal][i],i.toString ; cityEle.add optEle ; body onload changeCity form action id form1 name form1 method post table border 1 cellspacing 0 cellpadding 0 align center td width 120 省份 select onchange changeCity id province option value 0 北京市 option value 1 上海市 option value 2 天津市 option value 3 河北省 td width 120 城市 select id city option value -1 请选择 方法2 用xml文档保存城市信息 先给出相应的xml文档,保存的名称是cities.xml ?xml version 1.0 encoding UTF-8 province value hb 荆州 武汉 黄石 宜昌 荆门 黄冈 province value jl 长春 吉林 四平 松原 通化 province value ln 沈阳 鞍山 大连 抚顺 铁岭 province value sd 青岛 济南 烟台 威海 潍坊 !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN city.html meta http-equiv keywords content keyword1,keyword2,keyword3 meta http-equiv description content this is my page meta http-equiv content-type content text/html; charset UTF-8 script type text/javascript src ../js/jquery-1.4.3.js form action select id province name province option value -1 --请选择-- option value hb 湖北省 option value jl 吉林省 option value ln 辽宁省 option value sd 山东省 select id city name city option value -1 --请选择-- script type text/javascript $ function $ #province .change function var optValue $ this .val ; var xmlDoc getXMLDoc cities.xml ; var cityEle document.getElementById city ; //清空下拉选项 var cityOpt cityEle.getElement