jquery实现两个dropdownlist无刷新联动 .

来源：互联网发布：不属于网络群众路线编辑：程序博客网时间：2024/05/01 19:18

1)html代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQuerySyncDemo._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></title>
    <script language="javascript" type="text/javascript" src="jquery-1.4.2.js"></script>
    <script language="javascript" type="text/javascript">
        $(function() {
            var $class = $("#dropClass");
            var $student = $("#dropStudent");
            $class.bind("change keyup", function() {//当改变class时触犯事件
                if ($(this).val() != 0) {
                    var classId = $(this).val(); //获取班级编号
                    loadStudents(classId); //根据班级编号显示学生信息
                    $student.fadeIn("slow"); //显示学生信息
                }
                else {
                    $student.fadeOut("slow");//影藏学生信息
                }
            });
        });
        //根据班级编号获取学生信息
        function loadStudents(classId) {
            $.ajax({
                type: "POST",
                url: "Default.aspx/GetStudentsByClassId",
                data: "{classId: " + classId + "}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: true,
                success: function Success(data) {
                    printStudents(data.d);
                }
            });
        }
        //显示学生信息
        function printStudents(data) {
            $("#dropStudent > option").remove();
            for (var i = 0; i < data.length; i++) {
                $("#dropStudent").append($("<option></option>").val(data[i].Id).html(data[i].Name));
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="dropClass" runat="server">
        </asp:DropDownList>
        <asp:DropDownList ID="dropStudent" runat="server">
        </asp:DropDownList>
    </div>
    </form>
</body>
</html>
2)后台代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;

namespace JQuerySyncDemo
{
    public partial class _Default : System.Web.UI.Page
    {
        private static Class c=new Class();
        private static Student s=new Student();
        protected void Page_Load(object sender, EventArgs e)
        {
            c.SetClass();//添加班级信息
            s.SetStudent();//添加学生信息
            if (!IsPostBack)
            {
                BindClass();
            }
        }
        /// <summary>
        /// 绑定班级信息
        /// </summary>
        private void BindClass()
        {
            dropClass.DataSource = c.GetClass();
            dropClass.DataTextField = "Name";
            dropClass.DataValueField = "Id";
            dropClass.DataBind();
        }
        /// <summary>
        /// 根据班级编号获取学生信息
        /// </summary>
        /// <param name="classId"></param>
        /// <returns></returns>
        [WebMethod]
        public static IEnumerable<Student> GetStudentsByClassId(int classId)
        {
            return s.GetStudent(classId);
        }
    }
}
3) 班级实体类:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace JQuerySyncDemo
{
    public class Class
    {
        private List<Class> items = null;
        public Class() { }
        public Class(int id, string name)
        {
            this.Id = id;
            this.Name = name;
        }
        private int id;

        public int Id
        {
            get { return id; }
            set { id = value; }
        }
        private string name;

        public string Name
        {
            get { return name; }
            set { name = value; }
        }
        /// <summary>
        /// 添加班级信息
        /// </summary>
        public void SetClass()
        {
            items = new List<Class>();
            items.Add(new Class(1, "一班"));
            items.Add(new Class(2, "二班"));
            items.Add(new Class(3, "三班"));
            items.Add(new Class(4, "四班"));
        }
        /// <summary>
        /// 获取班级信息
        /// </summary>
        /// <returns></returns>
        public List<Class> GetClass()
        {
            return items;
        }
    }
}
4)学生实体类:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace JQuerySyncDemo
{
    public class Student
    {
        private List<Student> items = null;
        public Student(){}
        public Student(int id,string name,int classId) {
            this.Id = id;
            this.Name = name;
            this.ClassId = classId;
        }
        private int id;

        public int Id
        {
            get { return id; }
            set { id = value; }
        }
        private string name;

        public string Name
        {
            get { return name; }
            set { name = value; }
        }
        private int classId;

        public int ClassId
        {
            get { return classId; }
            set { classId = value; }
        }
        /// <summary>
        /// 添加学生信息
        /// </summary>
        public void SetStudent()
        {
            items = new List<Student>();
            items.Add(new Student(1, "张1", 1));
            items.Add(new Student(2, "李2", 1));
            items.Add(new Student(3, "王3", 2));
            items.Add(new Student(4, "李4", 2));
            items.Add(new Student(5, "王5", 3));
            items.Add(new Student(6, "李6", 3));
            items.Add(new Student(7, "张7", 4));
            items.Add(new Student(8, "李8", 4));
        }
        /// <summary>
        /// 获取学生信息
        /// </summary>
        /// <returns></returns>
        public IEnumerable<Student> GetStudent(int classId)
        {
            IEnumerable<Student> students = items.Where(u => u.classId == classId);
            return students;
        }
    }
}