其他分享
首页 > 其他分享> > ajax 实现 省市区 三级联动

ajax 实现 省市区 三级联动

作者：互联网

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>省市区三级联动</title>
    <style type="text/css">
        select{
            width: 200px;
        }
    </style>
    <script src="js/jquery-1.8.3.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
    $(function () {

        $.ajax({

            type: "get",
            url: "findProvince",
            dataType: "json",
            success: function (data) {
                var obj = $("#province");
                for (var i = 0; i < data.length; i++) {
                    var choose = "<option value='" + data[i].provinceCode + "'>" + data[i].name + "</option>";
                    obj.append(choose);
                }
            }
        })
    });
</script>
<script type="text/javascript">
    $(function () {

        $("#province").change(function () {
            //alert($("#province").val());
           // $("#area").html("<option>请选择</option>")
            findCity();
            findArea();
        });
    })

    function findCity() {
        $.ajax({
            async:false,
            type: "get",
            url: "findCity?pCode=" + $("#province").val(),
            dataType: "json",
            success: function (data) {
                $("#city option").remove();
                var obj = $("#city");
                for (var i = 0; i < data.length; i++) {
                    var choose = "<option value='" + data[i].cityCode + "'>" + data[i].name + "</option>";
                    obj.append(choose);
                }

            }
        })
    }
</script>
<script type="text/javascript">
    $(function () {
        $("#city").change(function () {
            // alert($("#province").val());
            findArea();
        });
    })

    function findArea() {
        $.ajax({
            type: "get",
            url: "findArea?cCode=" + $("#city").val(),
            dataType: "json",
            success: function (data) {
               $("#area option").remove();
                var obj = $("#area");
                for (var i = 0; i < data.length; i++) {
                    var choose = "<option value='" + data[i].areaCode + "'>" + data[i].name + "</option>";
                    obj.append(choose);
                }
            }
        })
    }
</script>

<select id="province" name="province">
    <option>请选择</option>
</select>省
<select id="city" name="city">
    <option>请选择</option>
</select>市
<select id="area" name="area">
    <option>请选择</option>
</select>区
<script>

</script>
</body>
</html>

标签：function,province,obj,ajax,choose,联动,var,省市区,data
来源： https://blog.csdn.net/m0_57550795/article/details/122275967