地区选择器

来源：互联网发布：白象梳篦淘宝店铺编辑：程序博客网时间：2024/04/27 18:22

1. HTML 代码

 <div>                           <label>地址：</label>                            <select id="province" onchange="getCity(this.value)" ></select>                               <select id="city" onchange="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 *************************地区选择相关操作 结束***************************

0 0