jquery+xml+ajax 省市多级联动

2 篇文章 0 订阅
1 篇文章 0 订阅
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.cs
using 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);
    }
}

不足之处 请多多指教
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值