1. HTML 代码
<div>
<label>地址:</label>
<select id="province" οnchange="getCity(this.value)" ></select>
<select id="city" οnchange="getArea(this.value)">
<option value="0"></option>
</select>
<select id="area">
<option></option>
</select>
</div>
2.JS 代码
function getProvince() {
$.ajax({
type: "GET",
cache: false,
url: "http://localhost:2030/wenjuanwebservice/WebService.asmx/GetProvince",
data: { },
contentType: "application/json; charset=utf-8",
dataType: "jsonp",
jsonp: "callback",
jsonpCallback: "getProvinceCallBack"
});
}
function getProvinceCallBack(data) {
var myJsonObject = data[0];
document.getElementById("province").options.length = 1;
for (var i = 0; i < myJsonObject.Info.length; i++) {
var myProvinceName = myJsonObject.Info[i].ProvinceName
var myProvinceID = myJsonObject.Info[i].ProvinceID;
var obj = document.getElementById("province");
obj.options.add(new Option(myProvinceName,myProvinceID));
}
}
function getCity() {
var myProvinceID = $("#province").val();
$.ajax({
type: "GET",
cache: false,
url: "http://localhost:2030/wenjuanwebservice/WebService.asmx/GetCity",
data: { ProvinceID:myProvinceID },
contentType: "application/json; charset=utf-8",
dataType: "jsonp",
jsonp: "callback",
jsonpCallback: "getCityCallBack"
});
}
function getCityCallBack(data) {
var myJsonObject = data[0];
document.getElementById("city").options.length = 1;
for (var i = 0; i < myJsonObject.Info.length; i++) {
var myCityName = myJsonObject.Info[i].CityName;
var myCityID = myJsonObject.Info[i].CityID;
var cityobj = document.getElementById("city");
cityobj.options.add(new Option(myCityName, myCityID));
}
}
function getArea() {
var myCityID = $("#city").val();
$.ajax({
type: "GET",
cache: false,
url: "http://localhost:2030/wenjuanwebservice/WebService.asmx/GetArea",
data: { CityID:myCityID },
contentType: "application/json; charset=utf-8",
dataType: "jsonp",
jsonp: "callback",
jsonpCallback: "getAreaCallBack"
});
}
function getAreaCallBack(data) {
var myJsonObject = data[0];
document.getElementById("area").options.length = 1;
for (var i = 0; i < myJsonObject.Info.length; i++) {
var myAreaName = myJsonObject.Info[i].AreaName;
var myAreaID = myJsonObject.Info[i].AreaID;
var areaobj = document.getElementById("area");
areaobj.options.add(new Option(myAreaName, myAreaID));
}
}
3. web service 代码
#region *************************地区选择相关操作 开始***************************
[WebMethod(EnableSession = true, Description = "省份选择")]
public void GetProvince()
{
//**********Most Necessary**********************
string myJsonReturnStr = string.Empty;
string myJsonCallBackFunctionName = "";
HttpContext.Current.Response.ContentType = "application/json;charset=utf-8";
if (HttpContext.Current.Request.Params["callback"] == null)
myJsonCallBackFunctionName = "Function_provinceList";
else
myJsonCallBackFunctionName = HttpContext.Current.Request.Params["callback"].ToString();
//**********Most Necessary**********************
string myJson = "";
List<CProvinceList> myListCProvinceList = new List<CProvinceList>();
CProvinceList myCProvinceList = new CProvinceList();
ConnCls myConnCls = new ConnCls();
string mySql = "select ProvinceID,ProvinceName from hat_province " ;
DataTable myTable = myConnCls.GetDataTable(mySql);
foreach (DataRow myRow in myTable.Rows)
{
CProvinceInfo myCProvinceInfo = new CProvinceInfo();
int myProvinceID = Convert.ToInt32(myRow["ProvinceID"].ToString());
string myProvinceName = myRow["ProvinceName"].ToString();
myCProvinceInfo.ProvinceID = myProvinceID;
myCProvinceInfo.ProvinceName = myProvinceName;
myCProvinceList.Info.Add(myCProvinceInfo);
}
myListCProvinceList.Add(myCProvinceList);
myJson = JsonConvert.SerializeObject(myListCProvinceList);
//**********Most Necessary**********************
HttpContext.Current.Response.Write(string.Format("{0}({1})", myJsonCallBackFunctionName, myJson));
HttpContext.Current.Response.End();
//**********Most Necessary**********************
}
[WebMethod(EnableSession = true, Description = "城市选择")]
public void GetCity(int ProvinceID)
{
//**********Most Necessary**********************
string myJsonReturnStr = string.Empty;
string myJsonCallBackFunctionName = "";
HttpContext.Current.Response.ContentType = "application/json;charset=utf-8";
if (HttpContext.Current.Request.Params["callback"] == null)
myJsonCallBackFunctionName = "Function_cityList";
else
myJsonCallBackFunctionName = HttpContext.Current.Request.Params["callback"].ToString();
//**********Most Necessary**********************
string myJson = "";
List<CCityList> myListCCityList = new List<CCityList>();
CCityList myCCityList = new CCityList();
ConnCls myConnCls = new ConnCls();
string mySql = "select CityID,CityName ,ProvinceID from hat_city where ProvinceID =" + ProvinceID.ToString();
DataTable myTable = myConnCls.GetDataTable(mySql);
foreach (DataRow myRow in myTable.Rows)
{
CCityInfo myCCityInfo = new CCityInfo();
int myProvinceID = Convert.ToInt32(myRow["ProvinceID"].ToString());
int myCityID = Convert.ToInt32(myRow["CityID"].ToString());
string myCityName = myRow["CityName"].ToString();
myCCityInfo.CityID = myCityID;
myCCityInfo.CityName = myCityName;
myCCityInfo.ProvinceID = myProvinceID;
myCCityList.Info.Add(myCCityInfo);
}
myListCCityList.Add(myCCityList);
myJson = JsonConvert.SerializeObject(myListCCityList);
//**********Most Necessary**********************
HttpContext.Current.Response.Write(string.Format("{0}({1})", myJsonCallBackFunctionName, myJson));
HttpContext.Current.Response.End();
//**********Most Necessary**********************
}
[WebMethod(EnableSession = true, Description = "地区选择")]
public void GetArea(int CityID)
{
//**********Most Necessary**********************
string myJsonReturnStr = string.Empty;
string myJsonCallBackFunctionName = "";
HttpContext.Current.Response.ContentType = "application/json;charset=utf-8";
if (HttpContext.Current.Request.Params["callback"] == null)
myJsonCallBackFunctionName = "Function_areaList";
else
myJsonCallBackFunctionName = HttpContext.Current.Request.Params["callback"].ToString();
//**********Most Necessary**********************
string myJson = "";
List<CAreaList> myListCAreaList = new List<CAreaList>();
CAreaList myCAreaList = new CAreaList();
ConnCls myConnCls = new ConnCls();
string mySql = "select AreaID,AreaName,CityID from hat_area where CityID =" + CityID.ToString();
DataTable myTable = myConnCls.GetDataTable(mySql);
foreach (DataRow myRow in myTable.Rows)
{
CAreaInfo myCAreaInfo = new CAreaInfo();
int myCityID = Convert.ToInt32(myRow["CityID"].ToString());
int myAreaID = Convert.ToInt32(myRow["AreaID"].ToString());
string myAreaName = myRow["AreaName"].ToString();
myCAreaInfo.AreaID = myAreaID;
myCAreaInfo.AreaName = myAreaName;
myCAreaInfo.CityID = myCityID;
myCAreaList.Info.Add(myCAreaInfo);
}
myListCAreaList.Add(myCAreaList);
myJson = JsonConvert.SerializeObject(myListCAreaList);
//**********Most Necessary**********************
HttpContext.Current.Response.Write(string.Format("{0}({1})", myJsonCallBackFunctionName, myJson));
HttpContext.Current.Response.End();
//**********Most Necessary**********************
}
#endregion *************************地区选择相关操作 结束***************************