jquery+xml+ajax 省市多级联动

来源:互联网 发布:巨人网络私有化 编辑:程序博客网 时间:2024/05/16 10:34
choice.js $(document).ready(function () {        if ($("._province").val() == "0") {            $("._city").append("<option value=\"0\">请选择:</option>");            $("._district").append("<option value=\"0\">请选择:</option>");        }        else {            var val = $("._province").val();            htmlobjc = $.ajax({ url: "Ashx/City.ashx?id=" + val, async: false });            var responsec = htmlobjc.responseText;            $("._city").append(responsec);            var pid = val;            $choiceText = $(".v_city").attr("value");            val = $("._city").val($choiceText).val();            htmlobj = $.ajax({ url: "Ashx/District.ashx?id=" + val + "&pid=" + pid, async: false });            var response = htmlobj.responseText;            $("._district").append(response);            $("._district").val($(".v_district").attr("value"));        }        $("._province").change(function () {            var val = $(this).val();            $("._city").empty();            $("._district").empty();            if (val != "0") {                htmlobj = $.ajax({ url: "Ashx/City.ashx?id=" + val, async: false });                var response = htmlobj.responseText;                $("._city").append(response);            }            else {                $("._city").append("<option value=\"0\">请选择:</option>");            }            $("._district").append("<option value=\"0\">请选择:</option>");        });        $("._city").change(function () {            var val = $(this).val();            var pid = $("._province").val();            if (val != "0") {                $("._district").empty();                htmlobj = $.ajax({ url: "Ashx/District.ashx?id=" + val + "&pid=" + pid, async: false });                var response = htmlobj.responseText;                $("._district").append(response);            }        });        $(".uBtn").click(function () {            $(".v_city").attr("value", "");            $(".v_district").attr("value", "");            $(".v_city").attr("value", $("._city").find("option:selected").text());            $(".v_district").attr("value", $("._district").find("option:selected").text());        })    });

Area.xml<?xml version="1.0" encoding="utf-8" ?><Area>  <Province id="1" name="河南省">    <City id="1" name="郑州市">      <District id="1" name="金水区"></District>      <District id="2" name="二七区"></District>    </City>    <City id="2" name="安阳市">      <District id="1" name="开发区"></District>      <District id="2" name="龙安区"></District>    </City>  </Province>  <Province id="2" name="河北省">    <City id="1" name="石家庄市">      <District id="1" name="11区"></District>      <District id="2" name="22区"></District>    </City>    <City id="2" name="邯郸市">      <District id="1" name="33区"></District>      <District id="2" name="44区"></District>    </City>  </Province></Area>
city.ashx<%@ WebHandler Language="C#" Class="City" %>using System;using System.Web;using System.Xml.Linq;using System.Linq;using System.Text;public class City : IHttpHandler {        public void ProcessRequest (HttpContext context) {        try        {            context.Response.ContentType = "text/plain";            string type = "City", id = string.Empty;            id = context.Request.QueryString["id"];            context.Response.Write(CityDrpDataBound(type, id));        }        catch { }    }    private string CityDrpDataBound(string type,string id)    {        StringBuilder str = new StringBuilder();        str.Append("<option value=\"0\">请选择:</option>\n");        string path = HttpContext.Current.Server.MapPath("~/xml/area/area.xml");        XElement xElement = XElement.Load(path);        var query = (from obj in xElement.Elements("Province")                     where obj.Attribute("id").Value==id                     select obj).Single();        var items = (from obj in query.Elements(type)                    select new                    {                        id = obj.Attribute("id").Value,                        name = obj.Attribute("name").Value,                    }).ToList();        foreach (var item in items)        {            str.Append("<option value=\"" + item.id + "\">" + item.name + "</option>\n");        }        return str.ToString();    }    public bool IsReusable {        get {            return false;        }    }}

district.ashx<%@ WebHandler Language="C#" Class="District" %>using System;using System.Web;using System.Xml.Linq;using System.Linq;using System.Text;public class District : IHttpHandler{    public void ProcessRequest (HttpContext context) {        try        {            context.Response.ContentType = "text/plain";            string type = "District", id = string.Empty, pid = string.Empty;            id = context.Request.QueryString["id"];            pid = context.Request.QueryString["pid"];            context.Response.Write(CityDrpDataBound(type, id, pid));        }        catch { }    }    private string CityDrpDataBound(string type,string id,string pid)    {        StringBuilder str = new StringBuilder();        str.Append("<option value=\"0\">请选择:</option>\n");        string path = HttpContext.Current.Server.MapPath("~/xml/area/area.xml");        XElement xElement = XElement.Load(path);        var query = (from obj in xElement.Elements("Province")                     where obj.Attribute("id").Value==pid                     select obj).Single();        var items = (from obj in query.Elements("City")                     where obj.Attribute("id").Value == id                     select obj).Single();        var district = (from obj in items.Elements(type)                     select new                     {                         id = obj.Attribute("id").Value,                         name = obj.Attribute("name").Value,                     }).ToList();        foreach (var item in district)        {            str.Append("<option value=\"" + item.id + "\">" + item.name + "</option>\n");        }        return str.ToString();    }    public bool IsReusable {        get {            return false;        }    }}

default.aspx页面调用<%@ Page Language="C#" AutoEventWireup="true" EnableEventValidation="false" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <script src="js/jquery.js" type="text/javascript"></script>    <script src="js/validation.js" type="text/javascript"></script>    <script src="js/choice/choice.js" type="text/javascript"></script>    <title></title></head><body>    <form id="form1" runat="server">    <div>    <input id="hf_City" class="v_city" type="hidden" runat="server"/>    <input id="hf_District" class="v_district" type="hidden" runat="server"/>    <asp:DropDownList ID="drp_Province" runat="server" class="qp_null_select _province">    </asp:DropDownList>    <asp:DropDownList ID="drp_City" runat="server" class="qp_null_select _city">    </asp:DropDownList>    <asp:DropDownList ID="drp_District" runat="server" class="qp_null_select _district">    </asp:DropDownList>    <asp:Button ID="btn_Update" runat="server" OnClick="btn_Update_Click" Text="添 加" class="uBtn"/>    </div>    </form></body></html>

default.aspx.csusing System;using System.Linq;using System.Xml.Linq;using System.Web.UI.WebControls;using System.Web.UI;public partial class _Default : System.Web.UI.Page{    protected void Page_Load(object sender, EventArgs e)    {        try        {            if (!IsPostBack)            {                ProvinceDrpDataBound();            }        }        catch { }    }    private void ProvinceDrpDataBound()    {        string path = Server.MapPath("~/xml/area/area.xml");        XElement xElement = XElement.Load(path);        var query = (from obj in xElement.Elements("Province")                     select new                     {                         id = obj.Attribute("id").Value,                         name = obj.Attribute("name").Value,                     });        drp_Province.DataSource = query;        drp_Province.DataTextField = "name";        drp_Province.DataValueField = "id";        drp_Province.DataBind();        drp_Province.Items.Insert(0, new ListItem("请选择:", "0"));    }    protected void btn_Update_Click(object sender, EventArgs e)    {        Response.Write(drp_Province.SelectedItem.Text + hf_City.Value + hf_District.Value);    }}

不足之处 请多多指教
原创粉丝点击