Asp.Net笔记（4）：JS城市列表
06 Jun 2012
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title></title>
<script type="text/javascript" language="javascript">
//定义存储省市信息的JSON集合
var cityList = [
{ "provider": "广西", "citys": ["南宁", "柳州", "桂林"] },
{ "provider": "四川", "citys": ["成都", "绵阳", "德阳"] },
{ "provider": "新疆", "citys": ["乌鲁木齐", "喀什", "库尔勒"] }
];
function changeCity() {
//清空城市下拉列表
document.getElementById("slcCitys").options.length = 0;
//获取选中的省份选项
var option = document.getElementById("slcProvider").options[document.getElementById("slcProvider").selectedIndex];
//循环遍历JSON集合
for (var i = 0; i < cityList.length; i++) {
//判断JSON省份项与当前选中的省份是否一致
if (cityList[i].provider == option.innerText) {
//从JSON集合中取出城市列表
for (var j = 0; j < cityList[i].citys.length; j++) {
var o = document.createElement("option");
o.innerText = cityList[i].citys[j];
document.getElementById("slcCitys").appendChild(o);
}
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<select runat="server" id="slcProvider" onchange="changeCity()">
<option selected="true">请选择城市</option>
<option>广西</option>
<option>四川</option>
<option>新疆</option>
</select>
<select runat="server" id="slcCitys">
<option selected="true">请选择城市</option>
</select>
</div>
</form>
</body>
</html>
转载请注明：于哲的博客 » Asp.Net笔记（4）：JS城市列表