省市区三级联动

最新推荐文章于 2024-07-21 02:56:05 发布

你看起来很好玩

最新推荐文章于 2024-07-21 02:56:05 发布

阅读量2.1k

点赞数 1

文章标签： json mysql

本文链接：https://blog.csdn.net/zhengzhiyun/article/details/52212054

版权

今天的我还是没逃过三级联动的控制决定来研究一下这个东西
其实对于这种逻辑思维的东西… 我仿佛弱了非常多
所以今天来说两种方法
一种是JSON 一种是PHP+MySQL

方法一 JSON

然而我为什么要先说JSON呢，因为其实相对于来说JSON只需要一个JSON文件? 也可能是我理解的不太到位.. 所以我们还是先说JSON 为主

{
    "provinces" : "四川省",
    "city" : "成都市",
    "area" : "金牛区"
},
{
    "provinces" : "四川省",
    "city" : "成都市",
    "area" : "青羊区"
}

这是我的JSON文件的一小部分，我选择了两个省，这样方便切换，由字面意思看 provinces 表示省份， city 表示城市， area 表示区域..取名无能的我，就把他们按英文翻译了。

接下来探寻到页面结构，不管是使用JSON 还是 PHP ，结构都是相同的，我是做了一个假样式，代码如下：

<style type="text/css">
    div {
        float: left;
        position: relative;
        width: 100px;
        height: 50px;
        margin-right: 20px;
        background: lightcoral;
        cursor: pointer;
    }
    div span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
    div ul {
        display: none;
        position: absolute;
        left: 0;
        top: 50px;
        width: 100px;
        background: lightcyan;
    }
    div ul li {
        width: 100px;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
</style>
// 选择省份
<div class="chose-pro">
    <span>请选择</span>
    <ul id="proList">
    </ul>
</div>
// 选择城市
<div class="chose-city">
    <span>请选择</span>
    <ul id="cityList"></ul>
</div>
// 选择地区
<div class="chose-area">
    <span>请选择</span>
    <ul id="areaList"></ul>
</div>

问了让大家有一个更加清晰的样式图，我决定放个图片..很丑就是了
列表样式

大概就是长这个样子，当你点击福建省的时候，请选择的字样会变成福建省，之后下一个请选择就会在json文件里检索。
接下来是用JQ设置

// 当你选择省份时，省份列表出现，并检索数据
$('.chose-pro').find('span').on('click', function() {
    $('#proList').css({
        "display" : "block"
    })
    show(1);
});
// 当你选择城市时，如果城市列表不为空，那么城市列表出现
$('.chose-city').find('span').on('click', function() {
    if(!$('#cityList').html() == "") {
        $('#cityList').css({
            'display' : "block"
        })   
    }

})
// 当你选择区域时，如果区域列表不为空，那么区域列表出现
$('.chose-area').find('span').on('click', function() {
    if(!$('#areaList').html() == "") {
        $('#areaList').css({
            'display' : 'block'
        })
    }
});
// 下面三个都为省市级三个列表，当你的鼠标单击旁边或在列表外时，列表自动回收，就不会造成当你点击完成或先填写别的信息时，列表一直下拉。可以拥有更好的用户体验。
$('.chose-pro').find('span').on('mouseout', function() {
    $('#proList').css({
        "display" : "none"
    });
    $('#proList').hover(function() {
        $('#proList').css({
            "display" : "block"
        })
    } ,function() {
        $('#proList').css({
            "display" : "none"
        })
    })
})
$('.chose-city').find('span').on('mouseout', function() {
    $('#cityList').css({
        "display" : "none"
    })
    $('#cityList').hover(function() {
        $('#cityList').css({
            "display" : "block"
        })
    }, function() {
        $('#cityList').css({
            "display" : "none"
        })
    })
})
$('.chose-area').find('span').on('mouseout', function() {
    $('#areaList').css({
        "display" : "none"
    })
    $('#areaList').hover(function() {
        $('#areaList').css({
            "display" : "block"
        })
    }, function() {
        $('#areaList').css({
            "display" : "none"
        })
    })
})

现在是关于检索数据的部分了，在上面的代码中，我写到show(1)这个函数，并没有解释，这个函数我用来检索数据。1表示省份，2表示城市，3表示区域。

// 函数中的num用来传数字，chose表示选择的省份或城市
function show(num, chose) {
    $.ajax({
        type: 'get',
        url: '../json/san.json'
    })
    // 先用ajax检索json数据，成功返回data
    .done(function(data) {
        // 1表示省份
        if(num == 1) {
            var proArr = [];
            // 这一个循环是我用来数组去重的，因为检索出来会有无数多个省份
            for(var i = 0; i < data.length; i++) {
                var item = data[i].provinces;
                if(proArr.indexOf(item) === -1) {
                    proArr.push(item);
                }
            }
            var proString = '';
            // 清空省份列表里的内容，很重要，不然当你选完一个省份要再选另一个的时候，就会不断添加新数据
            $('#proList').empty();
            // 将去重后的数据添加到列表内
            for(var i = 0; i < proArr.length; i++) {
                proString += "<li>" + proArr[i] + "</li>";
            }
            $('#proList').prepend(proString);
            // 判断，当点击省份列表的其中一个时，将span标签内的内容替换为选择的省份，并传递此参数，检索城市列表
            $('#proList').children('li').on('click', function() {
                $('.chose-pro').find('span').html($(this).text());
                $('#proList').css({
                    "display" : "none"
                })
                show(2, $(this).text()); 
            })
         // 城市列表
        } else if (num == 2 && chose != null) {
            var cityArr = [];
            for(var i = 0; i < data.length; i++) {
                var item = data[i].city;
                if(cityArr.indexOf(item) === -1 && data[i].provinces == chose) {
                    cityArr.push(item);
                }
            }
            $('#cityList').empty();
            var cityString = '';
            for(var i = 0; i < cityArr.length; i++) {
                cityString += "<li>" + cityArr[i]+ "</li>"
            }
            $('#cityList').prepend(cityString);
            $('#cityList').find('li').on('click', function() {
                $('.chose-city').find('span').html($(this).text());
                $('#cityList').css({
                    "display" : "none"
                })
                show(3, $(this).text());
            })
         // 区域列表
        } else if(num == 3 && chose != null) {
            $('#areaList').empty();
            var areaString = '';
            for(var i = 0; i < data.length; i++) {
                if(data[i].city == chose) {
                    areaString += "<li>" + data[i].area + "</li>";
                }
            }
            $('#areaList').prepend(areaString);
            $('#areaList').find('li').on('click', function() {
                $('.chose-area').find('span').html($(this).text());
                $('#areaList').css({
                    "display" : "none"
                })
            })
        }
    })
}

我只讲解了省份列表的，城市列表的和省份列表的大同小异，其中最简单的就是区域列表啦
在我打代码的过程当中，我认为有几个点是比较重要的。
首先是数组去重，因为json所检索的数据只能在页面当中进行修改。（也可能是我道行太浅还没有学会如何直接输出两个省市不用去重）。所以在省份和城市当中我都使用了数组去重。
其次是清空列表，因为有时候我们想要变换一下地方的时候，会点击再次弹出列表，如果这个时候不清空原本的列表，就会在原有的基础上，再次添加新数据。
最后是选择完你所选择的省份/城市/区域后，将列表隐藏。

跑跑跑

现在说第二种 PHP的

方法二 PHP + MySQL

我使用wamp做的..当然我也并不知道其他方法!!好蠢…
首先在wamp下建立数据库同json文件一样，省市区，其实只是一个在数据库里一个用json写

这是我的数据库
这里写图片描述

可以看出和json文件没有什么不同的但是在写代码的过程当中就会有不同的地方啦
首先，结构样式以及最开始的设置是相同的
即：

// 当你选择省份时，省份列表出现，并检索数据 需要注意的是 这里和json有不同的地方就在与这里的show函数我传递了三个参数。
$('.chose-pro').find('span').on('click', function() {
    $('#proList').css({
        "display" : "block"
    })
    show(1, 1, 1);
});
// 当你选择城市时，如果城市列表不为空，那么城市列表出现
$('.chose-city').find('span').on('click', function() {
    if(!$('#cityList').html() == "") {
        $('#cityList').css({
            'display' : "block"
        })   
    }

})
// 当你选择区域时，如果区域列表不为空，那么区域列表出现
$('.chose-area').find('span').on('click', function() {
    if(!$('#areaList').html() == "") {
        $('#areaList').css({
            'display' : 'block'
        })
    }
});
// 下面三个都为省市级三个列表，当你的鼠标单击旁边或在列表外时，列表自动回收，就不会造成当你点击完成或先填写别的信息时，列表一直下拉。可以拥有更好的用户体验。
$('.chose-pro').find('span').on('mouseout', function() {
    $('#proList').css({
        "display" : "none"
    });
    $('#proList').hover(function() {
        $('#proList').css({
            "display" : "block"
        })
    } ,function() {
        $('#proList').css({
            "display" : "none"
        })
    })
})
$('.chose-city').find('span').on('mouseout', function() {
    $('#cityList').css({
        "display" : "none"
    })
    $('#cityList').hover(function() {
        $('#cityList').css({
            "display" : "block"
        })
    }, function() {
        $('#cityList').css({
            "display" : "none"
        })
    })
})
$('.chose-area').find('span').on('mouseout', function() {
    $('#areaList').css({
        "display" : "none"
    })
    $('#areaList').hover(function() {
        $('#areaList').css({
            "display" : "block"
        })
    }, function() {
        $('#areaList').css({
            "display" : "none"
        })
    })
})

这一个部分是相同的
我们现在先说PHP当中应该怎么书写

// 跳过链接数据库的部分 这是我定义的参数abc三个，a用来表示判断，b又来传递选择的省份，c用来传递选择的城市
$a = $_POST['a'];
$b = $_POST['b'];
$c = $_POST['c'];

// 设置字符......
mysql_query("set names 'utf8'");
// 选择数据库
mysql_select_db("test", $link);
// 根据所传递的参数进行判断 当a=1时，检索省份.............
if($a == '1') {
    $sql = "SELECT DISTINCT provinces FROM san";
} else if($a == '2') {
    $sql = "SELECT DISTINCT city FROM san WHERE provinces = '$b'";
} else if($a == '3') {
    $sql = "SELECT DISTINCT area FROM san WHERE provinces = '$b' AND city = '$c'";
}
// 输出数据
$result = mysql_query($sql, $link);
$arr = array();
while($row = mysql_fetch_assoc($result)) {
    array_push($arr, $row);
}
echo json_encode($arr);

其实在php中书写的部分就是之前json版本的简略版其中有一句

SELECT DISTINCT 列名称 FROM 表名称

这是我从WC3shcool中看来的，作用是仅仅列出表中不同的值，这样一来就可以省略掉在json当中使用的数组去重方法了。

function show(num, chose, ac) {
    $.ajax({
        type: 'post',
        url: 'chose.php',
        data: {
            a: num,
            b: chose,
            c: ac
        }
    })
    .done(function(data) {
        if(num == 1) {
            $('#proList').empty();
            var proString = '';
            for(var i = 0; i < data.length; i++) {
                proString += "<li>" + data[i].provinces + "</li>";
            }
            $('#proList').prepend(proString);
            $('#proList').find('li').on('click', function() {
                $('.chose-pro').find('span').html($(this).text());
                $('#proList').css({
                    "display" : "none"
                })
                show(2, $(this).text(), 1);
            })
        } else if (num == 2) {
            $('#cityList').empty();
            var cityString = '';
            for(var i = 0; i < data.length; i++) {
                cityString += "<li>" + data[i].city + "</li>";
            }
            $('#cityList').prepend(cityString);
            $('#cityList').find('li').on('click', function() {
                $('.chose-city').find('span').html($(this).text());
                $('#cityList').css({
                    "display" : "none"
                })
                show(3, $('.chose-pro').find('span').html(), $(this).text());
            })
        } else if (num == 3) {
            $('#areaList').empty();
            var areaString = '';
            for(var i = 0; i < data.length; i++) {
                areaString += "<li>" + data[i].area + "</li>";
            }
            $('#areaList').prepend(areaString);
            $('#areaList').find('li').on('click', function() {
                $('.chose-area').find('span').html($(this).text());
                $('#areaList').css({
                    "display" : "none"
                });

            })
        }
    })
}

上面就是网页当中的代码书写。我认为最重要的一点就是一定要传递够参数。我前面没有传递足够的参数所以一直在bug…

总体来说我认为这两种方法都是可行的，相对于JSON来说，我认为PHP更加简单一些

希望以后能有更多更好的方法
省市区三级联动get√

这里写图片描述

你看起来很好玩

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
省市区三级联动

今天的我还是没逃过三级联动的控制决定来研究一下这个东西其实对于这种逻辑思维的东西… 我仿佛弱了非常多所以今天来说两种方法一种是JSON 一种是PHP+MySQL方法一 JSON然而我为什么要先说JSON呢，因为其实相对于来说JSON只需要一个JSON文件? 也可能是我理解的不太到位.. 所以我们还是先说JSON 为主{ "provinces" : "四川省", "cit
复制链接

扫一扫