HTML页<!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> <title></title> <script src="../Scripts/jquery-1.3.2.min-vsdoc.js" type="text/javascript"></script> <script language="javascript"> $( function() { //读取所有省份 $.getJSON("/JSTest/GetProvince", function(json) { document.getElementById("selprovince").length = 0; //添加显示省份 $(json).each( function() { var op = new Option(); op.value = this.Id; op.text = this.Name; document.getElementById("selprovince").options.add(op); } ); }); } ); //获取指定省份到城市 function GetCity(pid) { $.getJSON("/JSTest/GetCity", { PId: pid }, function(json) { document.getElementById("selcity").length = 0; $(json).each( function() { var op = new Option(); op.value = this.CId; op.text = this.CName; document.getElementById("selcity").options.add(op); } ); }); } </script></head> <body> <select id="selprovince" onchange="GetCity(this.value);"> <option value="s">--请选择--</option> </select> <select id="selcity"> </select> </body> </html>MVC后台代码 public class JSTestController : Controller { public JsonResult GetProvince() { //获取所有到省 var province = new List<Province> { new Province{Id=1,Name="河北省"}, new Province{Id=2,Name="河南省"}, new Province{Id=3,Name="陕西省"} }; return Json(province); } public JsonResult GetCity(int PId) { //根据省份获取城市 var citys = GetCitys(PId); return Json(citys); } /// <summary> /// 模拟数据访问 /// </summary> /// <param name="PId"></param> /// <returns></returns> private List<City> GetCitys(int PId) { var citys = new List<City>(); switch (PId) { case 1: citys.Add(new City { CId=1, CName="石家庄" }); citys.Add(new City { CId=2,CName="保定" }); break; case 2: citys.Add(new City { CId=3,CName="郑州" }); citys.Add(new City { CId = 4, CName = "洛阳" }); break; case 3: citys.Add(new City { CId=5, CName="西双版纳" }); break; } return citys; } } public class Province { int id; public int Id { get { return id; } set { id = value; } } string name; public string Name { get { return name; } set { name = value; } } } public class City { int cId; public int CId { get { return cId; } set { cId = value; } } string cName; public string CName { get { return cName; } set { cName = value; } } int pId; public int PId { get { return pId; } set { pId = value; } } }
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title> <script src="../Scripts/jquery-1.3.2.min-vsdoc.js" type="text/javascript"></script> <script language="javascript">
$(
function() {
//读取所有省份
$.getJSON("/JSTest/GetProvince", function(json) {
document.getElementById("selprovince").length = 0;
//添加显示省份
$(json).each(
function() {
var op = new Option();
op.value = this.Id;
op.text = this.Name;
document.getElementById("selprovince").options.add(op);
}
);
});
}
);
//获取指定省份到城市
function GetCity(pid) {
$.getJSON("/JSTest/GetCity", { PId: pid }, function(json) {
document.getElementById("selcity").length = 0;
$(json).each(
function() {
var op = new Option();
op.value = this.CId;
op.text = this.CName;
document.getElementById("selcity").options.add(op);
}
);
});
}
</script></head>
<body>
<select id="selprovince" onchange="GetCity(this.value);">
<option value="s">--请选择--</option>
</select>
<select id="selcity">
</select>
</body>
</html>MVC后台代码 public class JSTestController : Controller
{
public JsonResult GetProvince()
{
//获取所有到省
var province = new List<Province> {
new Province{Id=1,Name="河北省"},
new Province{Id=2,Name="河南省"},
new Province{Id=3,Name="陕西省"}
}; return Json(province);
} public JsonResult GetCity(int PId)
{
//根据省份获取城市
var citys = GetCitys(PId); return Json(citys);
}
/// <summary>
/// 模拟数据访问
/// </summary>
/// <param name="PId"></param>
/// <returns></returns>
private List<City> GetCitys(int PId)
{
var citys = new List<City>();
switch (PId)
{
case 1:
citys.Add(new City { CId=1, CName="石家庄" });
citys.Add(new City { CId=2,CName="保定" });
break;
case 2:
citys.Add(new City { CId=3,CName="郑州" });
citys.Add(new City { CId = 4, CName = "洛阳" });
break;
case 3:
citys.Add(new City { CId=5, CName="西双版纳" });
break;
}
return citys;
}
}
public class Province
{
int id;
public int Id
{
get { return id; }
set { id = value; }
}
string name; public string Name
{
get { return name; }
set { name = value; }
}
}
public class City
{
int cId; public int CId
{
get { return cId; }
set { cId = value; }
}
string cName; public string CName
{
get { return cName; }
set { cName = value; }
}
int pId; public int PId
{
get { return pId; }
set { pId = value; }
}
}