jquery与ajax实现三级联动下拉框

Original 2019-05-22 19:29:55 238
abstract:<script type="text/javascript">     $(function () {         $.getJSON('1.json',function (data)&n
<script type="text/javascript">
    $(function () {
        $.getJSON('1.json',function (data) {
            var option = '<option value="">选择 省</option>';
            $.each(data,function (i) {
                option  +='<option value="'+data[i].proId+'">'+data[i].proName+'</option>';
            });
            $("#pro").html(option);
        });

        $('#pro').change(function(){
            $.getJSON('2.json',function (data) {
                var 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(){
            $.getJSON('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);
            });
        });
        
    })
</script>


Correcting teacher:查无此人Correction time:2019-05-23 13:21:41
Teacher's summary:完成的不错。ajax很好用,页面不刷新,就可以更改数据。继续加油。

Release Notes

Popular Entries