三级联动菜单

原创 2019-05-30 07:58:14 209
摘要:<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>作业提示:  三级联动菜单</title></head><body>省 <select name=&

<!DOCTYPE html>

<html>



<head>

    <meta charset="UTF-8">

    <title>作业提示:  三级联动菜单</title>

</head>

<body>

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

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

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

<p id="addr"></p>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

<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>


批改老师:天蓬老师批改时间:2019-05-30 15:46:04
老师总结:你这是把教学代码直接放上来了, 做了一回搬运工

发布手记

热门词条