Jquery代码
<script type="text/javascript">
$(function(){
//提交事件
$("#ImageButton1").click(function(){
//省Id
var provinceId=$("#selProvince").val();
//市Id
var cityId=$("#selCity").val();
//区县Id
var districtId=$("#selDistrict").val();
//把省市区ID赋值到隐藏域
$("#hidProvince").attr("value",provinceId);
$("#hidCity").attr("value",cityId);
$("#hidDistrict").attr("value",districtId);
});
//加载地区
var area=$("#hidArea").val(); //后台将（省，市，区）ID放到隐藏域hidArea
// alert(area);
loadArea(0,0,area);//Ajax方法查询默认（北京，北京，朝阳）
$("#selProvince").change(function(){//存放省的下拉框发生变化时调用Ajax
loadArea(this.value,1,"");
});
$("#selCity").change(function(){//存放市的下拉框发生变化时调用Ajax
loadArea(this.value,2,"");
});
//id:省（0）市县id，type：0为省，1为市，2县，area：北京,北京,朝阳区
function loadArea(id,type,area){
$.ajax({
type:"get",
url:"/ashx/GetArea.ashx",
data:{Id:id,type:type},
dataType:"json",
success:function(data){
var str="";
var areaArr=area.split(",");
if(type==0){
$.each(data,function(i,item){
str=str+"<option value=\""+item.Id+"\">"+item.Name+"</option>";
})
var selProvince=$("#selProvince");
selProvince.html(str);
if(areaArr[0])
{
selProvince.val(areaArr[0]);
}
loadArea(selProvince.val(),1,area);
}
if(type==1){
$.each(data,function(i,item){
str=str+"<option value=\""+item.Id+"\">"+item.Name+"</option>";
})
var selCity=$("#selCity");
selCity.html(str);
if(areaArr[1])
{
selCity.val(areaArr[1]);
}
loadArea(selCity.val(),2,area);
}
if(type==2){
$.each(data,function(i,item){
str=str+"<option value=\""+item.Id+"\">"+item.Name+"</option>";
})
var selDistrict=$("#selDistrict");
selDistrict.html(str);
if(areaArr[2])
{
selDistrict.val(areaArr[2]);
}
//$("#selDistrict")
}
}
});
}
</script>
aspx页面代码
<div class="ptop1">填写联系地址：<span class="spanlv">*</span></div>
<div class="ptop2">
<select id="selProvince" runat="server">
</select>
<select id="selCity" runat="server">
</select>
<select id="selDistrict" runat="server">
</select>
<input type="hidden" id="hidArea" value="" runat="server" />
<input type="hidden" runat="server" id="hidProvince" />
<input type="hidden" runat="server" id="hidCity" />
<input type="hidden" runat="server" id="hidDistrict" />
</div>
一般处理程序 源码
using System;
using System.Collections;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using BLL;
using Newtonsoft.Json;
using System.Collections.Generic;
using Model;
using Common;
using Model.Linq;
namespace Web.ashx
{
/// <summary>
/// $codebehindclassname$ 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class GetArea : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
int id = 0;
string strId = context.Request.QueryString["Id"];
//类型：省0，市1，县2
string type = context.Request.QueryString["type"];
if (!string.IsNullOrEmpty(strId))
{
id = Convert.ToInt32(strId);
}
phDataContext ph = new phDataContext();
string result = "";
if (type == "0")
{
result = ConvertHelper.DataToJson(ph.Province.Select(p=> new { p.Id, p.Name}));
context.Response.Write(result);
}
if (type == "1")
{
result = ConvertHelper.DataToJson(ph.City.Where(c => c.ProvinceId == id).Select(c => new { c.Id,c.Name }));
context.Response.Write(result);
}
if (type == "2")
{
result = ConvertHelper.DataToJson(ph.District.Where(c => c.CityId == id).Select(d => new { d.Id, d.Name }));
context.Response.Write(result);
}
//context.Response.Write(result);
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
后台代码
//这个就是给hidArea隐藏域赋值
if (!pm01.Area.IsNullOrEmptyOrWhiteSpace())
{
//this.hidArea.Value = pm01.Area;
hidArea.Value = pm01.ProvinceId + "," + pm01.CityId + "," + pm01.DistrictId;
}
自从用了ajax就停不下来了 (ˇ?ˇ) 想～
Jquery+Ajax下拉框级联查询