ajax之城市三级联动练习

最新推荐文章于 2024-08-23 18:33:13 发布

土豆才不土

最新推荐文章于 2024-08-23 18:33:13 发布

阅读量65

点赞数 1

文章标签： ajax javascript jquery

本文链接：https://blog.csdn.net/qq_45256777/article/details/120800568

版权

在准备好服务器后
html部分

 <div>
        <select name="" id="province">
            <option value="">请选择省份</option>
        </select>
        <select name="" id="city">
            <option value="">请选择城市</option>
        </select>
        <select name="" id="district">
            <option value="">请选择区域</option>
        </select>
    </div>

样式部分

<style>
        div {
            text-align: center;
        }

        select {
            width: 150px;
            height: 30px;
        }
    </style>

js部分

 <script>
        var a = 0;
        var b = 0;
        var d=null;

            $.ajax({
                type:'get',
                url:'http://127.0.0.1:6562/0929/area-json.js',
                success: function(data){　　　      
                    d = JSON.parse(data.slice(10,-1)); //获取json数据并转化为数组数据
                    $.each(d,function(index,ele){
                    $('<option value = ""></option>').appendTo('#province').text(ele.name);//把省的数据插入列表中
                    })
        　　　　}
            })
        $('#province').on('change',function(e){  //当省变化时
            $.ajax({
                type:'get',
                url:'http://127.0.0.1:6562/0929/area-json.js',
                success: function(data){　　　      
                    d=JSON.parse(data.slice(10,-1));
                    a = e.target.selectedIndex - 1;  //当前下拉列表下标
                    if(a == -1){
                        $('#city').html('<option value="">请选择城市</option>');
                        $('#district').html('<option value="">请选择区域</option>');
                    }else{
                        $('#city').html('<option value="">请选择城市</option>');
                        $('#district').html('<option value="">请选择区域</option>');
                        if(d[a].children){
                            $.each(d[a].children,function(index,ele){
                                $('<option value = ""></option>').appendTo('#city').text(ele.name);

                            })
                        }
                    }
        　　　　}
            })
        })
        $('#city').on('change',function(e){   //当市变化时
            $.ajax({
                type:'get',
                url:'http://127.0.0.1:6562/0929/area-json.js',
                success: function(data){　　　      
                    d=JSON.parse(data.slice(10,-1));
                    b = e.target.selectedIndex - 1;
                    if(b == -1){
                        $('#district').html('<option value="">请选择区域</option>');
                    }else{
                        $('#district').html('<option value="">请选择区域</option>');
                        if(d[a].children[b].children){
                            $.each(d[a].children[b].children,function(index,ele){
                                $('<option value = ""></option>').appendTo('#district').text(ele.name);

                            })
                        }
                    }
        　　　　}
            })
            
        })
    </script>

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.js"></script>
    <style>
        div {
            text-align: center;
        }

        select {
            width: 150px;
            height: 30px;
        }
    </style>
</head>
<body>
    <div>
        <select name="" id="province">
            <option value="">请选择省份</option>
        </select>
        <select name="" id="city">
            <option value="">请选择城市</option>
        </select>
        <select name="" id="district">
            <option value="">请选择区域</option>
        </select>
    </div>
    <script>
        var a = 0;
        var b = 0;
        var d=null;

            $.ajax({
                type:'get',
                url:'http://127.0.0.1:6562/0929/area-json.js',
                success: function(data){　　　      
                    d = JSON.parse(data.slice(10,-1));
                    $.each(d,function(index,ele){
                    $('<option value = ""></option>').appendTo('#province').text(ele.name);
                    })
        　　　　}
            })
        $('#province').on('change',function(e){
            $.ajax({
                type:'get',
                url:'http://127.0.0.1:6562/0929/area-json.js',
                success: function(data){　　　      
                    d=JSON.parse(data.slice(10,-1));
                    a = e.target.selectedIndex - 1;
                    if(a == -1){
                        $('#city').html('<option value="">请选择城市</option>');
                        $('#district').html('<option value="">请选择区域</option>');
                    }else{
                        $('#city').html('<option value="">请选择城市</option>');
                        $('#district').html('<option value="">请选择区域</option>');
                        if(d[a].children){
                            $.each(d[a].children,function(index,ele){
                                $('<option value = ""></option>').appendTo('#city').text(ele.name);

                            })
                        }
                    }
        　　　　}
            })
        })
        $('#city').on('change',function(e){
            $.ajax({
                type:'get',
                url:'http://127.0.0.1:6562/0929/area-json.js',
                success: function(data){　　　      
                    d=JSON.parse(data.slice(10,-1));
                    b = e.target.selectedIndex - 1;
                    if(b == -1){
                        $('#district').html('<option value="">请选择区域</option>');
                    }else{
                        $('#district').html('<option value="">请选择区域</option>');
                        if(d[a].children[b].children){
                            $.each(d[a].children[b].children,function(index,ele){
                                $('<option value = ""></option>').appendTo('#district').text(ele.name);

                            })
                        }
                    }
        　　　　}
            })
            
        })
    </script>
</body>
</html>

土豆才不土

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax之城市三级联动练习

在准备好服务器后html部分 <div> <select name="" id="province"> <option value="">请选择省份</option> </select> <select name="" id="city"> <option value="">请选择城市</option>
复制链接

扫一扫