地區選擇器

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 *************************地區選擇相關操作 結束***************************