<html>
<head>
<title>JS数组</title>
<script>
var p=["湖北省","浙江省"];
var c=["武汉市","襄阳市","杭州市","温州市"];
c["武汉市"]=["武昌区","青山区","汉口区"];
c["襄阳市"]=["襄城区","樊城区"];
c["杭州市"]=["萧山区","杭山区","阿里区"];
c["温州市"]=["龙城区","瓯海区","鹿城区"];
p["湖北省"]=["武汉市","襄阳市"];
p["浙江省"]=["杭州市","温州市"];
function init() {
//以下代码添加省份的下拉框选项
var pro=document.getElementById("province");//获取省份下拉框对象
for(var i=0;i<p.length;i++){
var ap=new Option(p[i],p[i]);//等价于<Option value="湖北省">湖北省</Option>
pro.options.add(ap);//下拉框对象中添加选项,options当前下拉框的所有option集合
}
//以下代码添加市的下拉框选项
var ci=document.getElementById("city");//获取市下拉框对象
for(var i=0; i<c.length;i++) {
var ac=new Option(c[i],c[i]);
ci.options.add(ac);
}
//以下代码添加区的下拉框选项
var dis=document.getElementById("district");//获取区的下拉框对象
for(var i=0;i<c["武汉市"].length;i++) {
var ad=new Option(c["武汉市"][i],c["武汉市"][i]);
dis.options.add(ad);
}
}
//选择省份时,显示对应的市区
function setPro(){
var pro=document.getElementById("province");
var ci=document.getElementById("city");
ci.options.length=0;//清除市下拉框选项
var _pro=pro.value;//获取选择的省的值
for(var i=0;i<p[_pro].length;i++) {
var newc=new Option(p[_pro][i],p[_pro][i]);
ci.options.add(newc);
}
}
//选择市时,显示对应的区
function setCity() {
var dis=document.getElementById("district");
var ci=document.getElementById("city");
dis.options.length=0;//清除区下拉框
var _ci=ci.value;//获取选择的市的值
//给区下拉框赋对应的值
for(var i=0;i<c[_ci].length;i++) {
var newd=new Option(c[_ci][i],c[_ci][i]);
dis.options.add(newd);
}
}
</script>
</head>
<body οnlοad="init();">
<select id="province" οnchange="setPro();setCity();"></select>省
<select id="city" οnchange="setCity();"></select>市
<select id="district"></select>区
</body>
</html>
JavaScript数组
最新推荐文章于 2016-07-14 20:32:14 发布