省市查询实现

来源：互联网发布：抓取淘宝数据包编辑：程序博客网时间：2024/06/05 17:17

CityProSelect.htm：

<head>
<title></title>
<script src="../js/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//绑定省的数据,往后台发送一个异步请求
$.get("ProData.ashx", {}, function (data) {
//把数据放到下面的省的下拉列表里面去
$("#pro").html(data);
//触发一下改变事件
$("#pro").change();
});

$("#pro").change(function () {
//把最后的选中的省的Id拿到。从后台加载city信息
$.post("GetCityByProId.ashx", { proId: $(this).val() }, function (data) {
$("#city").html(data);
});
});
});
</script>
</head>
<body>
<select id="pro"></select>
<select id="city"></select>
</body>

ProData.ashx：

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
ProvinceTableAdapter proAdapter = new ProvinceTableAdapter();
DataSet1.ProvinceDataTable dt = proAdapter.GetData();

StringBuilder sb = new StringBuilder();
//把数据封装为<option></option>
foreach (var pro in dt)
{
sb.AppendFormat("<option value='{0}'>{1}</option>",pro.ProID,pro.ProName);
}

context.Response.Write(sb.ToString());
}

GetCityByProId.ashx：

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
int id = int.Parse(context.Request["proId"]??"0");
CityTableAdapter adapter = new CityTableAdapter();
var dt = adapter.GetDataByProId(id);
StringBuilder sb = new StringBuilder();
foreach (var city in dt)
{
sb.AppendFormat("<option value='{0}'>{1}</option>",city.CityID,city.CityName);
}

context.Response.Write(sb.ToString());

}