省市区三级联动
来源：互联网 发布：java compare返回结果 编辑：程序博客网 时间：2024/05/27 19:27
今天的我还是没逃过三级联动的控制 决定来研究一下这个东西
其实对于这种逻辑思维的东西… 我仿佛弱了非常多
所以今天来说两种方法
一种是JSON 一种是PHP+MySQL
然而我为什么要先说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的
我使用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
- js省市区三级联动
- 省市区三级联动
- 省市区三级联动
- 省市区三级异步联动
- PHP、省市区三级联动
- js省市区三级联动
- XML省市区三级联动
- 三级联动（省市区）
- jQuery省市区三级联动
- ajax省市区三级联动
- 省市区三级联动
- Android 省市区三级联动
- 省市区三级联动
- 实现省市区三级联动
- android 省市区三级联动
- JS省市区三级联动
- 省市区三级联动json
- 省市区三级联动
- OpenCV中的肤色检测
- 函数指针&指针函数
- Codeforces Round #328 (Div. 2) A(模拟) B(数学) C(数学)
- HDU1698 Just a Hook [lazy+成段更新]
- 导入Maven项目后，Eclipse提示“Missing artifact ”类的错误
- 省市区三级联动
- 【深入理解java集合系列】List,Set,Map用法以及区别
- svn学习
- 测试图片
- Scrapy爬虫Demo
- Eclipse中根据数据库自动生成dao、mapper、model
- div边框线上添加文字
- poj3070 Fibonacci（矩阵快速幂）
- 数据结构实验图论一：基于邻接矩阵的广度优先搜索遍历
