AjaxPHPmysql实现城市的三级联动

Posted 老东西吖

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AjaxPHPmysql实现城市的三级联动相关的知识,希望对你有一定的参考价值。

我们经常见到以下网页的效果:

那么这种三级联动效果如何实现?废话不多说直接上代码!

数据库设计如下(这里仅以北京市为例):
  1. DROP TABLE IF EXISTS `area`;

  2. CREATE TABLE `area` (

  3. `id` int(11) unsigned NOT NULL AUTO_INCREMENT,

  4. `code` varchar(255) NOT NULL DEFAULT '' COMMENT '城市编码',

  5. `name` varchar(255) NOT NULL DEFAULT '' COMMENT '城市名称',

  6. `pid` int(11) NOT NULL DEFAULT '0' COMMENT '上级id',

  7. PRIMARY KEY (`id`)

  8. ) ENGINE=InnoDB AUTO_INCREMENT=3509 DEFAULT CHARSET=utf8;


  9. INSERT INTO `area` VALUES ('1', '110000', '北京市', '0');

  10. INSERT INTO `area` VALUES ('2', '110100', '市辖区', '1');

  11. INSERT INTO `area` VALUES ('3', '110101', '东城区', '2');

  12. INSERT INTO `area` VALUES ('4', '110102', '西城区', '2');

  13. INSERT INTO `area` VALUES ('5', '110105', '朝阳区', '2');

  14. INSERT INTO `area` VALUES ('6', '110106', '丰台区', '2');

  15. INSERT INTO `area` VALUES ('7', '110107', '石景山区', '2');

  16. INSERT INTO `area` VALUES ('8', '110108', '海淀区', '2');

  17. INSERT INTO `area` VALUES ('9', '110109', '门头沟区', '2');

  18. INSERT INTO `area` VALUES ('10', '110111', '房山区', '2');

  19. INSERT INTO `area` VALUES ('11', '110112', '通州区', '2');

  20. INSERT INTO `area` VALUES ('12', '110113', '顺义区', '2');

  21. INSERT INTO `area` VALUES ('13', '110114', '昌平区', '2');

  22. INSERT INTO `area` VALUES ('14', '110115', '大兴区', '2');

  23. INSERT INTO `area` VALUES ('15', '110116', '怀柔区', '2');

  24. INSERT INTO `area` VALUES ('16', '110117', '平谷区', '2');

  25. INSERT INTO `area` VALUES ('17', '110118', '密云区', '2');

  26. INSERT INTO `area` VALUES ('18', '110119', '延庆区', '2');

后端处理

 
   
   
 
  1. //接收pid参数,默认找省份 pid = 0

  2. $pid = isset($_POST['pid']) ? intval($_POST['pid']) : 0;

  3. //查询省份信息

  4. $pdo = new PDO('mysql:dbname=你自己的', '你自己的', '你自己的');


  5. //sql语句

  6. $sql = "select * from area where pid=$pid";


  7. //执行sql查询语句

  8. $statement = $pdo->query($sql);


  9. //获取所有结果

  10. $data = $statement->fetchAll();


  11. //返回json格式字符串

  12. echo json_encode($data);

前端(这里js部分自己细细揣摩,注释很详细)

 
   
   
 
  1. <body>

  2. <select id="province" style="width:150px">

  3. <option value="">请选择省份</option>

  4. </select>

  5. <select id="city" style="width:150px">

  6. <option value="">请选择城市</option>

  7. </select>

  8. <select id="area" style="width:150px">

  9. <option value="">请选择地区</option>

  10. </select>

  11. <script type="text/javascript" src="ajax.js"></script>

  12. <script type="text/javascript">

  13. window.onload = function(){

  14. //发送ajax请求,获取省份信息

  15. ajax('post', 'xxx.php', '', function(res){

  16. // console.log(res);return;

  17. //转化为json对象

  18. var json = JSON.parse(res);

  19. //循环,取出每一条数据,拼接option标签

  20. var html = '<option value="">请选择省份</option>';

  21. for(var i=0; i<json.length; ++i){

  22. html += '<option value="' + json[i].id + '">'+ json[i].name +'</option>';

  23. }

  24. //将拼接的html字符串显示到页面 显示到省份下拉列表

  25. document.getElementById('province').innerHTML = html;

  26. });


  27. //给省份下拉列表绑定change事件

  28. document.getElementById('province').onchange = function(){

  29. //将城市下拉列表还原

  30. document.getElementById('city').innerHTML = '<option value="">请选择城市</option>';

  31. //将地区下拉列表还原

  32. document.getElementById('area').innerHTML = '<option value="">请选择地区</option>';

  33. //获取到选中的省份的id

  34. var pid = this.value;

  35. if(pid == ''){

  36. return;

  37. }

  38. //发送ajax请求,查询省份下的城市

  39. ajax('post', 'xxx.php', 'pid=' + pid, function(res){

  40. //转化为json对象

  41. var json = JSON.parse(res);

  42. //循环,取出每一条数据,拼接option标签

  43. var html = '<option value="">请选择城市</option>';

  44. for(var i=0; i<json.length; ++i){

  45. html += '<option value="' + json[i].id + '">'+ json[i].name +'</option>';

  46. }

  47. //将拼接的html字符串显示到页面 城市的下拉列表

  48. document.getElementById('city').innerHTML = html;

  49. });

  50. }


  51. //给城市下拉列表绑定change事件

  52. document.getElementById('city').onchange = function(){

  53. //将地区下拉列表还原

  54. document.getElementById('area').innerHTML = '<option value="">请选择地区</option>';

  55. //获取选中的城市

  56. var pid = this.value;

  57. if(pid == ''){

  58. return;

  59. }

  60. //发送ajax请求

  61. ajax('post', 'xxx.php', 'pid=' + pid, function(res){

  62. //转化为json格式对象

  63. var json = JSON.parse(res);

  64. //遍历数据,拼接option标签

  65. var html = '<option value="">请选择地区</option>';

  66. for(var i=0; i<json.length; ++i){

  67. html += '<option value="' + json[i].id + '">' + json[i].name + '</option>'

  68. }

  69. //将拼接好的html代码 显示到页面 地区的下拉列表

  70. document.getElementById('area').innerHTML = html;

  71. });


  72. }

  73. }

  74. </script>

  75. </body>

以上是关于AjaxPHPmysql实现城市的三级联动的主要内容,如果未能解决你的问题,请参考以下文章

使用react和axios实现的城市三级联动

使用react和axios实现的城市三级联动

小程序实现城市地区三级联动

jquery城市三级联动插件distpicker怎么引入

jquery 城市三级联动

task 1:完成省城市的三级联动(包括湖南省),附代码和效果图。