javascript基于DOM实现省市级联下拉框的方法
本文实例讲述了javascript基于DOM实现省市级联下拉框的方法。分享给大家供大家参考。具体实现方法如下：
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>省市级联下拉框</title>
<scripttype="text/javascript">
varprovs={"江西省":["南昌市","景德镇","九江","鹰潭","萍乡","新馀","赣州","吉安","宜春","抚州","上饶"],
"福建省":["福州","厦门","莆田","三明","泉州","漳州","南平","龙岩","宁德"],
"河北省":["石家庄","邯郸","邢台","保定","张家口","承德","廊坊","唐山","秦皇岛","沧州","衡水"]
};
functionloadProv(){
//加载省份数据
varprov=document.getElementById("prov");
for(varkeyinprovs){
varprovName=key;
varoptProv=document.createElement("option");
optProv.value=provName;
optProv.innerText=provName;
prov.appendChild(optProv);
}
}
functionprovChange(){
varprov=document.getElementById("prov");
varcity=document.getElementById("city");
varprovName=prov.value;
//如果没有选择省份，则把城市下拉框隐藏
if(provName=="none"){
city.style.display="none";
return;
}
else{
city.style.display="";
}
varcitys=provs[provName];
//city.options.length=0;
//用这种方法也可以清空原始列表
//清空城市的原始数据
for(vari=city.childNodes.length-1;i>=0;i--){
varchild=city.childNodes[i];
city.removeChild(child);
}
//添加新的城市数据
for(vari=0;i<citys.length;i++){
varoptCity=document.createElement("option");
optCity.value=citys[i];
optCity.innerText=citys[i];
city.appendChild(optCity);
}
}
</script>
</head>
<bodyonload="loadProv()">
<selectid="prov"onchange="provChange()">
<optionvalue="none">请选择省</option>
</select>
<selectid="city"style="display:none"></select>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。