Thinkphp3实现省市区三级联动

发表于 2017年06月14日
PHP , 前端

基于TP3，一张表实现省市区三级联动【3409条数据】

public function index(){
    $province = M('Tree')->where ( array('pid'=>1) )->select ();
    $this->assign('province',$province);
    $this->display();
 
}
public function getRegion(){
    $Region=M("Tree");
    $map['pid']=$_REQUEST["pid"];
    $map['type']=$_REQUEST["type"];
    $list=$Region->where($map)->select();
    echo json_encode($list);
}

public function index(){

$province = M('Tree')->where ( array('pid'=>1) )->select ();

$this->assign('province',$province);

$this->display();

}

public function getRegion(){

$Region=M("Tree");

$map['pid']=$_REQUEST["pid"];

$map['type']=$_REQUEST["type"];

$list=$Region->where($map)->select();

echo json_encode($list);

}

<select name="province" id="province" onchange="loadRegion('province',2,'city','{:U('Index/getRegion')}');">
   <option value="0" selected>省份/直辖市</option><volist name="province" id="vo"> 
   <option value="{$vo.id}" >{$vo.name}</option></volist>
</select>          
<select name="city" id="city"  onchange="loadRegion('city',3,'town','{:U('Index/getRegion')}');">
  <option value="0">市/县</option>
</select>
<select name="town" id="town">
  <option value="0">镇/区</option>
</select>

</select>

</select>

</select>

function loadRegion(sel,type_id,selName,url){
    jQuery("#"+selName+" option").each(function(){
        jQuery(this).remove();
    });
    jQuery("<option value=0>请选择</option>").appendTo(jQuery("#"+selName));
    if(jQuery("#"+sel).val()==0){
        return;
    }
    jQuery.getJSON(url,{pid:jQuery("#"+sel).val(),type:type_id},
        function(data){
            if(data){
                jQuery.each(data,function(idx,item){
                    jQuery("<option value="+item.id+">"+item.name+"</option>").appendTo(jQuery("#"+selName));
                });
            }else{
                jQuery("<option value='0'>请选择</option>").appendTo(jQuery("#"+selName));
            }
        }
    );
}
</script>

function loadRegion(sel,type_id,selName,url){

jQuery("#"+selName+" option").each(function(){

jQuery(this).remove();

});

jQuery("<option value=0>请选择</option>").appendTo(jQuery("#"+selName));

if(jQuery("#"+sel).val()==0){

return;

}

jQuery.getJSON(url,{pid:jQuery("#"+sel).val(),type:type_id},

function(data){

if(data){

jQuery.each(data,function(idx,item){

jQuery("<option value="+item.id+">"+item.name+"</option>").appendTo(jQuery("#"+selName));

});

}else{

jQuery("<option value='0'>请选择</option>").appendTo(jQuery("#"+selName));

}

);

}

</script>

DROP TABLE IF EXISTS `tp_tree`;
CREATE TABLE `tp_tree` (
  `id` int(5) unsigned NOT NULL AUTO_INCREMENT,
  `pid` int(5) unsigned NOT NULL DEFAULT '0',
  `name` varchar(120) DEFAULT NULL,
  `type` tinyint(1) DEFAULT '2',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=3410 DEFAULT CHARSET=utf8;