jquery ajax实现省市县3级联动

最新推荐文章于 2019-04-11 21:43:34 发布

陈家小子

最新推荐文章于 2019-04-11 21:43:34 发布

阅读量2.5k

点赞数

分类专栏： C#.net

本文链接：https://blog.csdn.net/chenpeggy/article/details/8645748

版权

C#.net 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!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">
    <title></title>
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var ddlProvince = $("#ddlProvince");
            var ddlCity = $("#ddlCity");
            var ddlCounty = $("#ddlCounty");
            LoadData(0, "", ddlProvince);
            ddlCity.html('<option selected="selected" value="0">---请选择----</option>');
            ddlCounty.html('<option selected="selected" value="0">---请选择----</option>');
            ddlProvince.change(function () {
                LoadData(1, ddlProvince.val(), ddlCity);
                ddlCounty.html('<option selected="selected" value="0">---请选择----</option>');

            });
            ddlCity.change(function () {
                LoadData(2, ddlCity.val(), ddlCounty);
            });
        });

        function LoadData(level, code, ddl) {
            ddl.html('<option selected="selected" value="0">---请选择----</option>');
            $.getJSON('area.ashx',
                    { level: level, code: code },
                     function (data) {
                         for (var i = 0; i < data.length; i++) 
                         {
                             ddl.append($("<option></option>").val(data[i].AreaCode).html(data[i].AreaName));
                         }
                     });
        }
   

    </script>
  
</head>
<body>
    <form id="form1" runat="server">

    <div>

        <asp:DropDownList ID="ddlCountry" runat="Server">
            <asp:ListItem Selected="True">中国</asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList ID="ddlProvince" runat="server"  >
        </asp:DropDownList>
        <asp:DropDownList ID="ddlCity" runat="server">
        </asp:DropDownList>
        <asp:DropDownList ID="ddlCounty" runat="server">
        </asp:DropDownList>

    </div>
    </form>
</body>
</html>

area.ashxusing System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Text;using Model;using Service;using DAO;namespace WebApplication1{ /// <summary> /// area 的摘要说明 /// </summary> public class area : IHttpHandler
 { public Service.AreaService service = new Service.AreaService(); public IList<Area> AreaList; IDictionary<string, object> conditions = new Dictionary<string, object>(); public void ProcessRequest(HttpContext context) { string code = context.Request["code"].ToString();
 int level = Convert.ToInt32(context.Request["level"]); StringBuilder sb = new StringBuilder(string.Empty); conditions.Add("AreaCode", code); switch (level) { case 0: AreaList = service.GetProvinceService(); break; case 1: AreaList = service.GetCityByProvinceService(conditions);
 break; case 2: AreaList = service.GetCountyByCityNameService(conditions); break; default: break; } string result = Newtonsoft.Json.JsonConvert.SerializeObject(AreaList); context.Response.ContentType = "text/plain"; context.Response.Write(result); } public
 bool IsReusable { get { return false; } } }}