jquery 綁定省份和城市

標籤：style   blog   http   color   使用   os   io   檔案   

前台代碼：

<asp:DropDownList runat="server" ID="ddlProvince">
</asp:DropDownList>
 <asp:DropDownList runat="server" ID="ddlCity">
</asp:DropDownList>

後台綁定省份

protected void Page_Load(object sender, EventArgs e)
{
        BindDDL();
        ddlProvince.Attributes.Add("onchange", "getCitys(this)");
}
public void BindDDL()
{
//綁定省份、直轄市和特別行政區
        ddlProvince.Items.Clear();
        DataSet dsProvince = Province.GetAllCES();
        ddlProvince.DataSource = dsProvince;
        ddlProvince.DataTextField = "ProvinceName";
        ddlProvince.DataValueField = "ProvinceID";
        ddlProvince.DataBind();
        ddlProvince.Items.Add(new ListItem("其他", "0"));
}

js事件處理getCitys(),為了提高效能，下面不該建立一個個的option對象然後一個個的添加到ddlcity裡面，應該放到一個字串裡面然後一起放到optionddlcity裡面，這裡就不改了。

function getCitys(ddlProvince) {
            $.ajax({
                url: "SettingsHandler.ashx",
                data: { type: "getCitys", ProvinceID: $(ddlProvince).find("option:selected").val() },
                type: "get",
                cache: false,
                dataType: "json",
                error: function() {
                    alert("occur error");
                },
                success: function(data) {
                    $(‘#ddlCity‘).empty();
                    var option0 = $("<option></option>");
                    option0.text("不限");
                    option0.val("0");
                    $(‘#ddlCity‘).append(option0);
                    if ($(ddlProvince).find("option:selected").val() != "0") {
                        var objCitys = eval(data);
                        $.each(objCitys.citys, function(i, city) {
                            var option = $("<option></option>");
                            option.text(city.CityName);
                            option.val(city.CityID);
                            $(‘#ddlCity‘).append(option);
                        });
                    }
                }
            });
        }

SettingHandler.ashx檔案

public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "application/json";
        string strjson = "{\"JDataList\":[]}";
        string strType = context.Request.QueryString["type"].ToString();
        if (strType == "getCitys")//根據省份ID擷取對應的城市
        {
            string strProvinceID = context.Request.Form["ProvinceID"].ToString();
            DataSet dsCitys = Province.GetCitysByProvinceID(ValidateHelper.GetInt(strProvinceID));
            if (DataHelper.DataIsNotNull(dsCitys))
            {
                strjson = JsonHelper.DataTableToJSON(dsCitys.Tables[0], "citys");
            }
        }

　　　　return strjson;
}

JsonHelper.DataTableToJSON(DataTable dt,string dtName)方法：

public static string DataTableToJSON(DataTable dt, string dtName)
    {
        StringBuilder sb = new StringBuilder();
        StringWriter sw = new StringWriter(sb);

        using (JsonWriter jw = new JsonTextWriter(sw))
        {
            JsonSerializer ser = new JsonSerializer();
            jw.WriteStartObject();
            jw.WritePropertyName(dtName);
            jw.WriteStartArray();
            foreach (DataRow dr in dt.Rows)
            {
                jw.WriteStartObject();

                foreach (DataColumn dc in dt.Columns)
                {
                    jw.WritePropertyName(dc.ColumnName);
                    ser.Serialize(jw, dr[dc].ToString());
                }

                jw.WriteEndObject();
            }
            jw.WriteEndArray();
            jw.WriteEndObject();

            sw.Close();
            jw.Close();

        }

        return sb.ToString();
    }

以上使用了JSON、JQUERY來實現省市的無重新整理聯動。