<!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 src="jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript">
var data = {"广东省":['揭阳','广州','潮州'],"河南省":['郑州','洛阳','三门峡'],"山东省":['济南','青岛','烟台']}
function loadPro(){
var provice = document.getElementById("provice");
for(var pro in data){
var option = document.createElement("option");
option.value = pro;
option.innerText=pro;
provice.appendChild(option);
}
}
function loadCity(){
var pro = document.getElementById("provice").value;
var city = document.getElementById("city");
jQuery('#city').empty();
if(pro=="none"){
return;
}
var cities = data[pro];
for(var i =0;i<cities.length;i++){
var option = document.createElement("option");
option.value =cities[i];
option.innerText=cities[i];
city.appendChild(option);
}
}
</script>
</head>
<body onload="loadPro()">
<select name="provice" id="provice" onchange="loadCity()">
<option value="none">请选择省</option>
</select>
<select name="city" id="city">
</select>
</body>
</html>
