jquery 城市三级联动
这个js是在网上看到的，所以又加了些自己的修改
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题文档</title>
<scripttype="text/javascript"src="area.js"></script>
<scripttype="text/javascript"src="jquery-1.6.2.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
getProvinces();
});
functiongetProvinces(){
varpro="";
for(vari=0;i<provinces.length;i++){
pro+="<optionvalue="+i+">"+provinces[i]+"</option>";
}
$('#province').empty().append(pro);
getCities();
}
functiongetCities(){
varproIndex=$('#province').find("option:selected").val();
showCities(proIndex);
getCounties();
}
functionshowCities(proIndex){
varcit="";
if(cities[proIndex]==null){
$('#city').empty();
return;
}
for(vari=0;i<cities[proIndex].length;i++){
cit+="<optionvalue="+i+">"+cities[proIndex][i]+"</option>";
}
$('#city').empty().append(cit);
}
functiongetCounties(){
varproIndex=$('#province').find("option:selected").val();
varcitIndex=$('#city').find("option:selected").val();
showCounties(proIndex,citIndex);
}
functionshowCounties(pro,cit){
varcou="";
if(counties[pro][cit]==null){
$('#county').empty();
return;
}
for(vari=0;i<counties[pro][cit].length;i++){
cou+="<option>"+counties[pro][cit][i]+"</option>";
}
$('#county').empty().append(cou);
}
</script>
</head>
<body>
<selectid="province"onchange="getCities()"></select>
<selectid="city"onchange="getCounties()"style="width:120px;"></select>
<selectid="county"style="width:120px;"></select>
</body>
</html>