省市县三级联动代码php源生,省市县三级联动

省市县三级联动，在项目中应用的很广泛，也是很基础的功能。虽然说基础，其实其中还是包含一些小的问题，例如有一些新手做这个功能的时候，容易忽略：如果用户选择完省-市-县三级的时候，回头又重新选择了省，此时就应该讲市-县选择的内容清空。否则容易导致数据错误。

现在我就用 ThinkPHP5 来给 搭建大家展示这个简单的功能。为了演示的方便，我只在数据库中添加有效的地区数据，全国的数据，自己可自行百度。

~~~

DROP TABLE IF EXISTS `area`;

CREATE TABLE `area` (

`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '地区id',

`name` varchar(155) NOT NULL COMMENT '地区名称',

`pid` int(11) NOT NULL COMMENT '上级地区id',

PRIMARY KEY (`id`)

) ENGINE=MyISAM AUTO_INCREMENT=30 DEFAULT CHARSET=utf8;

-- ----------------------------

-- Records of area

-- ----------------------------

INSERT INTO `area` VALUES ('1', '江苏', '0');

INSERT INTO `area` VALUES ('2', '南京', '1');

INSERT INTO `area` VALUES ('3', '徐州', '1');

INSERT INTO `area` VALUES ('4', '苏州', '1');

INSERT INTO `area` VALUES ('5', '镇江', '1');

INSERT INTO `area` VALUES ('6', '江宁区', '2');

INSERT INTO `area` VALUES ('7', '浦口区', '2');

INSERT INTO `area` VALUES ('8', '建邺区', '2');

INSERT INTO `area` VALUES ('9', '玄武区', '2');

INSERT INTO `area` VALUES ('10', '云龙区', '3');

INSERT INTO `area` VALUES ('11', '泉山区', '3');

INSERT INTO `area` VALUES ('12', '鼓楼区', '3');

INSERT INTO `area` VALUES ('13', '铜山区', '3');

INSERT INTO `area` VALUES ('14', '姑苏区', '4');

INSERT INTO `area` VALUES ('15', '工业园区', '4');

INSERT INTO `area` VALUES ('16', '高新区', '4');

INSERT INTO `area` VALUES ('17', '京口区', '5');

INSERT INTO `area` VALUES ('18', '润州区', '5');

INSERT INTO `area` VALUES ('19', '镇江新区', '5');

INSERT INTO `area` VALUES ('20', '浙江', '0');

INSERT INTO `area` VALUES ('21', '杭州', '20');

INSERT INTO `area` VALUES ('22', '宁波', '20');

INSERT INTO `area` VALUES ('23', '上城区', '21');

INSERT INTO `area` VALUES ('24', '下城区', '21');

INSERT INTO `area` VALUES ('25', '西湖区', '21');

INSERT INTO `area` VALUES ('26', '江干区', '21');

INSERT INTO `area` VALUES ('27', '海曙区', '22');

INSERT INTO `area` VALUES ('28', '江东区', '22');

INSERT INTO `area` VALUES ('29', '江北区', '22');

~~~

数据库有了，那么我们来看看，控制器方面该如何设计，在Tools.php 中新建，一个 area：

~~~

// 三级联动

public function area()

{

if(request()->isAjax()){

$code = input('post.code');

$lists = db('area')->where('pid', $code)->select();

return json(['code' => 1, 'data' => $lists, 'msg' => 'ok']);

}

$province = db('area')->where('pid', 0)->select();

$this->assign([

'province' => $province

]);

return $this->fetch();

}

~~~

代码就是这么的简洁。默认查出省份渲染到前台，用户触发选择，就把用户选择 id 发送过来，后台查询他的 子类即可。看一下欠他页面和关键的 js 部分代码，在 application\index\view\tools 下面 新建 area.html

~~~

省-市-县三级联动

省-市-县三级联动

不限区域

{foreach name="province" item="vo"}

{$vo.name}

{/foreach}

请选择城市

请选择区

var area_url = "{:url('tools/area')}";

$(function(){

//省市区,三级联动 ---- begin -----

$("#p").change(function(){

var pid = $(this).find("option:selected").attr('data-id');

//已经选择了省份，又不选择省份，改变属性

if( '0' == pid){

$("#pname").val('不限区域');

$("#c").html('选择城市').attr('disabled', true);

$("#a").html('选择区').attr('disabled', true);

}

if('0' == pid){

return ;

}

$.post(area_url, {'code' : pid}, function(res){

if(1 == res.code){

var _html = '选择城市';

$.each(res.data, function(k, v){

_html += '' + v.name + '';

});

$('#c').html(_html);

}

}, 'json');

$("#c").removeAttr('disabled'); //去除不可选状态

$("#a").html('选择区').attr('disabled', true);

});

$("#c").change(function(){

var cid = $(this).find("option:selected").attr('data-id');

//已经选择了城市，又不选择城市，改变属性

if( '0' == cid){

$("#cname").val('');

$("#a").html('选择区').attr('disabled', true);

}

if( '0' == cid ){

return ;

}

$.post(area_url, {'code' : cid}, function(res){

if(1 == res.code){

var _html = '选择区';

$.each(res.data, function(k, v){

_html += '' + v.name + '';

});

$('#a').html(_html);

}

}, 'json');

$("#a").removeAttr('disabled'); //去除不可选状态

});

$("#a").change(function(){

var aid = $(this).find("option:selected").attr('data-id');

if('0' == aid){

$("#aname").val('');

}

});

//---- end -----

});

~~~

效果如下：