先把省级联动做好 接着最重要一部分就是if部分相等

Original 2018-12-12 00:45:08 305
abstract:<!DOCTYPE html><html><head> <title>三级联动</title></head><body>省:<select name="" id="pro"></select>市:<select name=""

<!DOCTYPE html>

<html>

<head>

<title>三级联动</title>

</head>

<body>

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

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

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

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

<script type="text/javascript">

    <script>

    $(function(){

        $.getJSON('inc/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('inc/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('inc/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>

</body>

</html>


Correcting teacher:天蓬老师Correction time:2018-12-12 08:54:51
Teacher's summary:这个作业重点是考察通过Ajax方式异步的获取数据并渲染到页面上

Release Notes

Popular Entries