Ajax制作的下拉列表三级联动

最新推荐文章于 2023-10-30 18:44:29 发布

小巷而已

最新推荐文章于 2023-10-30 18:44:29 发布

阅读量906

点赞数

分类专栏： javaScript/Jquery

本文链接：https://blog.csdn.net/xianglikai1/article/details/52086509

版权

javaScript/Jquery 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

HTML部分：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="js/jquery-1.7.2.min.js"></script>
    <title></title>
    <style>
        select {
            width: 100px;
        }
    </style>
</head>
<body>
    <!--三个下拉列表-->
    <select id="sel1"></select>
    <select id="sel2"></select>
    <select id="sel3"></select>

    <script type="text/javascript">
        //加载时调用第一个列表加载数据的方法
        ChinaAjax('0001', '1');

        //列表1的选项改变事件
        $("#sel1").change(function () {
            ChinaAjax($("#sel1 option:selected").val(), '2');
        });

        //列表2的选项改变事件
        $("#sel2").change(function () {
            ChinaAjax($("#sel2 option:selected").val(), '3');
        });

        //通用ajax方法，参数1，parentcode，参数2，需要将数据添加到哪个列表
        function ChinaAjax(Pcode, se) {
            $.ajax({
                url: "China.ashx",
                data: { "ParentCode": Pcode },
                typt: "post",
                dataType: "json",
                success: function (data) {
                    //刷新列表1
                    if (se == '1') {
                        $("#sel1").empty();
                        for (i in data) {
                            $("#sel1").get(0).options.add(new Option(data[i].name, data[i].code));
                        }
                        //会在列表1添加完毕后自动刷新列表2，同时列表2添加完毕后会自动刷新列表3
                        ChinaAjax($("#sel1 option:selected").val(), '2');
                    }
                    //刷新列表2
                    if (se == '2') {
                        $("#sel2").empty();
                        for (i in data) {
                            $("#sel2").get(0).options.add(new Option(data[i].name, data[i].code));
                        }
                        //会在列表2添加完毕后自动刷新列表3
                        ChinaAjax($("#sel2 option:selected").val(), '3');
                    }
                    //刷新列表3
                    if (se == '3') {
                        $("#sel3").empty();
                        for (i in data) {
                            $("#sel3").get(0).options.add(new Option(data[i].name, data[i].code));
                        }
                    }
                },
            });//sel1.ajax
        };
    </script>
</body>
</html>

服务端处理程序部分：

<%@ WebHandler Language="C#" Class="China" %>

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

public class China : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        string json = "[";
        int count = 0;
        var Pcode = context.Request["ParentCode"];
        List<ChinaStates> query = new ChinaData().Select(Pcode);

        foreach (var data in query)
        {
            if (count <= 0)
            {
                json += "{\"name\":\"" + data.AreaName + "\",\"code\":\"" + data.AreaCode + "\"}";
            }
            else
            {
                json += ",{\"name\":\"" + data.AreaName + "\",\"code\":\"" + data.AreaCode + "\"}";
            }
            count++;
        }
        json += "]";
        context.Response.Write(json);
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}