ajax.net +jquery 无刷新三级联动的实例代码

前端技术 2023/09/06 .NET

复制代码 代码如下:

    <!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>
    <title></title>
    <script src=\"Jquery1.7.js\" type=\"text/javascript\"></script>
    <script type=\"text/javascript\">
        $(function () {
            $.ajax({
                type: \"post\",
                contentType: \"application/json\",
                url: \"WebService1.asmx/loadprovince\",
                data: \"{}\",
                success: function (result) {
                    var ping;
                    for (var i = 0; i < result.d.length; i++) {
                        ping += \"<option value=\" + result.d[i].provinceID + \">\";
                        ping += result.d[i].provincename;
                        ping += \"</option>\";

                    }
                    $(\'#Select1\').append(ping);

   
                }

   
            })
            $(\'#Select1\').change(function () {
                //第二次选时要记得清空市和县中的内容
                $(\'#Select2 option:gt(0)\').remove();
                $(\'#Select3 option:gt(0)\').remove();
                //在省的改变事件里绑定下一个下来列表（要失掉省的id）

                $.ajax({
                    type: \"post\",
                    contentType: \"application/json\",
                    url: \"WebService1.asmx/loadcity\",
                    data: \"{fatherid:\'\" + $(\'#Select1 option:selected\').val() + \"\'}\",
                    success: function (result) {
                        var str2;
                        for (var i = 0; i < result.d.length; i++) {
                            str2 += \"<option value=\" + result.d[i].cityID + \">\";
                            str2 += result.d[i].cityname;
                            str2 += \"</option>\";
                        }

                        $(\'#Select2\').append(str2);
                    }
                })
            })
            $(\'#Select2\').change(function () {
                $(\'#Select3 option:gt(0)\').remove();

                $.ajax({
                    type: \"post\",
                    contentType: \"application/json\",
                    url: \"WebService1.asmx/loadarea\",
                    data: \"{fatherid:\'\" + $(\'#Select2 option:selected\').val() + \"\'}\",
                    success: function (result) {
                        var str3;
                        for (var i = 0; i < result.d.length; i++) {
                            str3 += \"<option value=\" + result.d.areaID + \">\";
                            str3 += result.d[i].areaname;
                            str3 += result.d[i].father;

                        }
                        $(\'#Select3\').append(str3);
                    }
                })
            })
        })

    </script>
</head>
<body>
   省：
    <select id=\"Select1\">
        <option>--请选择--</option>
    </select>
    市：
    <select id=\"Select2\">
        <option>--请选择--</option>
    </select>
    县：
    <select id=\"Select3\">
        <option>--请选择--</option>
    </select>
</body>
</html>

本文地址：https://www.stayed.cn/item/14810

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案