返回ajax三级联......登陆

ajax三级联动

普照新时空2019-09-26 11:13:5826

<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>ajax三级联动</title>

</head>


<body>

    省 <select name="" id="pro"></select>

    市 <select name="" id="city"></select>

    区 <select name="" id="area"></select>

</body>

<script src="./js/jquery-3.3.1.min.js"></script>

<script>

    $(function () {

        $.getJSON('js/1.json', function (data) {

            let option = '<option value="">选择(省)</option>';

            $.each(data, function (i) {

                option += '<option value="' + data[i].proId + '">' + data[i].proName + '</option>';

            });

            $('#pro').html(option);


        });


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

            //查看当前选择中元素内容

            console.log($(this).find(':selected').text());


            $.getJSON('js/2.json', function (data) {

                let option = '<option value="">选择(市)</option>';

                $.each(data, function (i) {

                    if (data[i].proId == $('#pro').val()) {

                        option += '<option value="' + data[i].cityId + '">' + data[i].cityName + '</option>';

                    }

                });

                $('#city').html(option);

            });

        });

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

            //查看当前选择中元素内容

            console.log($(this).find(':selected').text());

            $.getJSON('js/3.json', function (data) {

                let option = '<option value="">选择(县区)</option>';

                $.each(data, function (i) {

                    if (data[i].cityId == $('#city').val()) {

                        option += '<option value="' + data[i].areaId + '">' + data[i].areaName + '</option>';

                    }

                });

                $('#area').html(option);

            });

        });


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

            //查看当前选择中元素内容

            console.log($(this).find(':selected').text());

        });

    })

</script>


</html>

AJAX 提供的接口更方便


最新手记推荐

• 新闻模块对应模块的代码• 依赖注入小例子• 模板显示用户信息表,并分页显示• 模板继承,模仿php页面• 模拟用户登录验证的案例 依赖注入 Facade

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网