Ajax 实现省市县三级联动【无刷新】三层 | 三级联动—有刷新

现在的位置: 首页 > 综合 > 正文

Ajax 实现省市县三级联动【无刷新】三层 | 三级联动—有刷新

2012年04月11日 ⁄ 综合 ⁄ 共 3219字 ⁄ 字号小中大 ⁄ 评论关闭

SQL建表

HTML——HTMLPage1.htm

[html]view

 plaincopy

<html xmlns="http://www.w3.org/1999/xhtml">  

<head>  

    <title>Ajax 实现省市县 三级联动【无刷新】三层</title>  

    <style type="text/css">  

        select  

        {  

            width: 130px;  

        }  

    </style>  

    <script src="js/Jquery1.7.js" type="text/javascript"></script>  

    <script type="text/javascript">  

        $(function () {  

            $.ajax({  

                type: "post",  

                contentType: "application/json",  

                url: "WebService1.asmx/GetProvince",  

                data: "{}",  

                success: function (result) {  

                    var stroption = '';  

                    for (var i = 0; i < result.d.length; i++) {  

                        stroption += '<option value=' + result.d[i].provinceID + '>';  

                        stroption += result.d[i].provincename;  

                        stroption += '</option>';  

                    }  

                    $('#seprovince').append(stroption);  

                }  

            })  

            $('#seprovince').change(function () {  

                $('#secity option:gt(0)').remove();  

                $('#searea option:gt(0)').remove();  

                $.ajax({  

                    type: "post",  

                    contentType: "application/json",  

                    url: "WebService1.asmx/GetCItyByPro",  

                    data: "{proid:'" + $(this).val() + "'}",  

                    success: function (result) {  

                        var strocity = '';  

                        for (var i = 0; i < result.d.length; i++) {  

                            strocity += '<option value=' + result.d[i].cityID + '>';  

                            strocity += result.d[i].cityname;  

                            strocity += '</option>';  

                        }  

                        $('#secity').append(strocity);  

                    }  

                })  

            })  

            $('#secity').change(function () {  

                $('#searea option:gt(0)').remove();  

                $.ajax({  

                    type: "post",  

                    contentType: "application/json",  

                    url: "WebService1.asmx/GetAreaByCity",  

                    data: "{cityid:'" + $(this).val() + "'}",  

                    success: function (result) {  

                        var stroarea = '';  

                        for (var i = 0; i < result.d.length; i++) {  

                            stroarea += '<option value=' + result.d[i].areaID + '>';  

                            stroarea += result.d[i].areaname;  

                            stroarea += '</option>';  

                        }  

                        $('#searea').append(stroarea);  

                    }  

                })  

            })  

        })  

    </script>  

</head>  

<body>  

    <table>  

        <tr>  

            <td>  

                用户名  

            </td>  

            <td>  

                <input id="Text1" type="text" />  

            </td>  

        </tr>  

        <tr>  

            <td>  

                密码  

            </td>  

            <td>  

                <input id="Text2" type="text" />  

            </td>  

        </tr>  

        <tr>  

            <