JQuery实现的三级联动菜单

最新推荐文章于 2024-07-26 03:31:50 发布

dingli0258520

最新推荐文章于 2024-07-26 03:31:50 发布

阅读量653

点赞数

文章标签： jquery function xml javascript server url

本文链接：https://blog.csdn.net/dingli0258520/article/details/6511148

版权

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" language="javascript" src="JS/jquery-1.4.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                url: "XML/Area.xml",
                type: "GET",
                success: function (xml) {
                    $(xml).find("province").each(function () {
                        $("#shen").append("<option>" + $(this).attr("name").toString() + "</option>");
                    });
                    $("#shen").change();
                }
            });

            $("#shen").change(function () {
                $("#shi>option").remove();
                var shenname = $("#shen").val();
                $.ajax({
                    url: "XML/Area.xml",
                    type: "GET",
                    success: function (xml) {
                        $(xml).find("province[name=" + shenname + "]>city").each(function () {
                            $("#shi").append("<option>" + $(this).attr("name").toString() + "</option>");
                        });
                        $("#shi").change();
                    }
                })
            });

            $("#shi").change(function () {
                $("#qu>option").remove();
                var shiname = $("#shi").val();
                $.ajax({
                    url: "xml/Area.xml",
                    type: "GET",
                    success: function (xml) {
                        $(xml).find("city[name=" + shiname + "]>country").each(function () {
                            $("#qu").append("<option>" + $(this).attr("name").toString() + "</option>");
                        })
                    }
                })
            })
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <select id="shen" style="width:100px;"></select>
    <select id="shi" style="width:100px;"></select>
    <select id="qu" style="width:100px;"></select>
    </div>
    </form>
</body>
</html>