JQuery+Ajax实战三级下拉列表联动

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery+Ajax实战三级下拉列表联动相关的知识,希望对你有一定的参考价值。

本片文章为练习,项目中不会这样写:

一:涉及到的知识点:

jQuery Dom操作
jQuery Ajax操作
ASP.net中的json操作
二:用了自动代码生成器
1.Dal层的代码:
public static partial class BranchTwoService
	{
        /// <summary>
        /// 根据一级机构的ID得二级机构列表
        /// </summary>
        /// <param name="branchOneId">1级机构ID</param>
        /// <returns></returns>
        public static IList<BranchTwo> GetBranchTwoByBranchOneId(int branchOneId)
        {
            string strsql = "select * from BranchTwo where BranchOneNo=" + branchOneId;
            return GetBranchTwosBySql(strsql);
        }
	}

public static partial class BranchThirdService
	{
        /// <summary>
        /// 根据二级机构的ID得三级机构列表
        /// </summary>
        /// <param name="branchTwoId">2级机构ID</param>
        /// <returns></returns>
        public static IList<BranchThird> GetBranchThirdByBranchTwoId(int branchTwoId)
        {
            string strsql = "select * from BranchThird where BranchTwoNo=" + branchTwoId;
            return GetBranchThirdsBySql(strsql);
        }
	}

2.BLL层的代码:

   public static partial class BranchTwoManager
    {
        /// <summary>
        /// 根据一级机构的ID得二级机构列表
        /// </summary>
        /// <param name="branchOneId">1级机构ID</param>
        /// <returns></returns>
        public static IList<BranchTwo> GetBranchTwoByBranchOneId(int branchOneId)
        {
            return DAL.BranchTwoService.GetBranchTwoByBranchOneId(branchOneId);
        }
    }
 public static partial class BranchThirdManager
    {
        /// <summary>
        /// 根据二级机构的ID得三级机构列表
        /// </summary>
        /// <param name="branchTwoId">2级机构ID</param>
        /// <returns></returns>
        public static IList<BranchThird> GetBranchThirdByBranchTwoId(int branchTwoId)
        {
            return DAL.BranchThirdService.GetBranchThirdByBranchTwoId(branchTwoId);
        }
    }

 UI层的代码:

 protected void Page_Load(object sender, EventArgs e)
    {
        IList<Models.BranchOne> branchOnes = BLL.BranchOneManager.GetAllBranchOnes();
        string json = JsonHelper.Serialize(branchOnes);
        Response.Write(json);
    }

 protected void Page_Load(object sender, EventArgs e)
    {
        if (Request["branchoneid"] != null)
        {
            int branchoneId = int.Parse(Request.QueryString["branchoneid"]);
            IList<Models.BranchTwo> branchTwos = BLL.BranchTwoManager.GetBranchTwoByBranchOneId(branchoneId);
            Response.Write(JsonHelper.Serialize(branchTwos));
        }
    }

public partial class BranchThirdHandler : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Request["branchtwoid"] != null)
        {
            int branchtwoId = int.Parse(Request.QueryString["branchtwoid"]);
            IList<Models.BranchThird> branchThirds= BLL.BranchThirdManager.GetBranchThirdByBranchTwoId(branchtwoId);
            Response.Write(JsonHelper.Serialize(branchThirds));
        }
    }
}

 JQuery代码:

%@ Page Language="C#" AutoEventWireup="true"  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">
    <title>jQuery+Ajax实战三级下拉列表联动</title>
    <script src="Scripts/jquery-1.2.6.js" type="text/javascript"></script>
<%--    <script src="Scripts/jquery-1.2.6-vsdoc-cn.js" type="text/javascript"></script>
--%>    <script type="text/javascript">
            $(document).ready(function() {
                $("#divLoading").ajaxStart(function() { $(this).show(); })
                        .ajaxSuccess(function() { $(this).hide() })
                        .ajaxError(function() { $(this).html("数据加载失败!"); });
                $.getJSON("BranchOneHandler.aspx", function(data) {
                    var $cbxBranchOne = $("#cbxBranchOne");
                    $.each(data, function(i, json) {
                        var $option = $("<option/>").append(json.branchName).attr("value", json.id);
                        $cbxBranchOne.append($option);
                    });
                    $cbxBranchOne[0].selectedIndex = 0;
                    $cbxBranchOne.change(function() {
                        var $cbxBranchTwo = $("#cbxBranchTwo");
                        $cbxBranchTwo.empty(); //清空options
                        var branchoneId = $(this).attr("value");
                        if (branchoneId) {
                            $.getJSON("BranchTowHandler.aspx", { branchoneid: branchoneId }, function(data) {
                                $.each(data, function(i, json) {
                                    var $option = $("<option/>").append(json.branchName).attr("value", json.id);
                                    $cbxBranchTwo.append($option);
                                });
                            });
                        }

                        $cbxBranchTwo.change(function() {
                            var $cbxBranchThird = $("#cbxBranchThird");
                            $cbxBranchThird.empty();
                            var branchtowId = $(this).attr("value");
                            if (branchtowId) {
                                $.getJSON("BranchThirdHandler.aspx", { branchtwoid: branchtowId }, function(data) {
                                    $.each(data, function(i, json) {
                                        var $option = $("<option/>").append(json.branchName).attr("value", json.id);
                                        $cbxBranchThird.append($option);
                                    });
                                });
                            }
                        });
                    });


                });
            });
    </script>
</head>
<body style="text-align:center;padding-top:0px;">
<div id="divLoading" style="width:50px;height:20px;color;white;background-color:Green;text-align:center;padding-top:3px;position:absolute;top:0px;left:0px;display:none;">Loading...</div>
    <form id="form1" runat="server">
    <div style="padding-top:30px">
        <table id="tbBranch" style="width: 361px; border-left-color: #cc00ff; border-bottom-color: #cc00ff; border-top-style: solid; border-top-color: #cc00ff; border-right-style: solid; border-left-style: solid; border-right-color: #cc00ff; border-bottom-style: solid;" border="1">
            <tr>
                <td colspan="3" style="height: 21px; background-color: #cc00ff" align="center">
                    <span style="color: #ffffff"><strong>
                    jQuery+Ajax实战三级下拉列表联动</strong></span></td>
            </tr>
            <tr>
                <td style="width: 74px; background-color: #cc00ff; height: 38px;">
                    一级机构</td>
                <td colspan="2" style="width: 243px; height: 38px;">
                    <select id="cbxBranchOne" style="width: 171px">
                        <option selected="selected"></option>
                    </select></td>
            </tr>
            <tr>
                <td style="width: 74px; background-color: #cc00ff; height: 31px;">
                    二级机构</td>
                <td colspan="2" style="width: 243px; height: 31px;">
                    <select id="cbxBranchTwo" style="width: 171px">
                        <option selected="selected"></option>
                    </select>
                </td>
            </tr>
            <tr>
                <td style="width: 74px; background-color: #cc00ff; height: 29px;">
                    三级机构</td>
                <td colspan="2" style="width: 243px; height: 29px;">
                    <select id="cbxBranchThird" style="width: 171px">
                        <option selected="selected"></option>
                    </select>
                </td>
            </tr>
        </table>
    
    </div>
    </form>
</body>
</html>

 用到的帮助类:

using System;
using System.Collections.Generic;
using System.Web;
using System.IO;
using System.Text;

/// <summary>
/// JSON序列化与反序列化辅助类
/// </summary>
public class JsonHelper
{
    /// <summary>
    /// 用于把对象data序列化为json格式的字符串
    /// </summary>
    /// <typeparam name="T"></typeparam>
    /// <param name="data"></param>
    /// <returns></returns>
    public static string Serialize<T>(T data)
    {
        System.Runtime.Serialization.Json.DataContractJsonSerializer serializer = new System.Runtime.Serialization.Json.DataContractJsonSerializer(data.GetType());
        using (MemoryStream ms = new MemoryStream())
        {
            serializer.WriteObject(ms, data);
            return Encoding.UTF8.GetString(ms.ToArray());
            //ms.Position = 0;
            //using (StreamReader sr = new StreamReader(ms))
            //{
            //    return sr.ReadToEnd();
            //}
        }
    }
    /// <summary>
    /// 用于把json格式的js对象反序列化为C#中的类
    /// </summary>
    /// <typeparam name="T"></typeparam>
    /// <param name="json"></param>
    /// <returns></returns>
    public static T Deserialize<T>(string json)
    {
        T obj = Activator.CreateInstance<T>();
        using (MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(json)))
        {
            System.Runtime.Serialization.Json.DataContractJsonSerializer serializer = new System.Runtime.Serialization.Json.DataContractJsonSerializer(obj.GetType());
            return (T)serializer.ReadObject(ms);
        }
    }
}

 

 

 

以上是关于JQuery+Ajax实战三级下拉列表联动的主要内容,如果未能解决你的问题,请参考以下文章

未加星标 ajax三级联动的实现方法

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

三级联动怎么回显 javaweb

用php+mysql+ajax+jquery做省市区三级联动

ajax实现三级联动下拉菜单

如何用jquery+ajax写省市区的三级联动?(封装和不封装两种方式)-----2017-05-14