基於ThinkPHP+AJAX的省市區三級聯動

木子小僧發表於2016-03-03
PHP

練習，就當練習。

省市區三級聯動，樣式如下圖所示：

1，匯入兩個js檔案並且匯入資料庫檔案。

兩個js檔案分別是jquery-2.1.4.min.js和jquery-1.js，資料庫檔案，見附件。

2，建一個index.html

<div>
    <label>所在地點</label>
    <select name="province_id" id="province_id" style="width:150px;">
        <option>請選擇</option>
        <volist name="province_list" id="province">
            <option  value="{$province.region_id}">{$province.region_name}</option>
        </volist>                                                  
     </select>
     <select name="city_id"  id="city_id" style="width:150px;" >
         <option>請選擇</option>
         <volist name="city_list" id="city">
             <option value="{$city.region_id}" selected="selected">{$city.region_name}</option>
         </volist>                                                  
      </select>
      <select name="district_id"  id="district_id" style="width:150px;" >
          <option value="0">請選擇</option>
          <volist name="dis_list" id="dis">
           <option value="{$dis.region_id}" selected="selected">{$dis.region_name}</option>
          </volist>                                              
       </select>  
</div>

寫ajax啦，一個是獲取市，一個是獲取縣區。

<script>
    $("#province_id").change(function(){
    var province_id=$(this).val();
    $.ajax({
        url:'/city/index.php/Home/Index/get_citys',
        Type:"POST",
        data:"province_id="+province_id,
        dataType:"json",
        success:function(data){
            var city = data.city;
            var option=$("<option></option>");
            $(option).val("0");
            $(option).html("請選擇");
            var option1=$("<option></option>");
            $(option1).val("0");
            $(option1).html("請選擇");
            $("#city_id").html(option);
            $("#district_id").html(option1);
            for(var i in city){
                var option=$("<option></option>");
                $(option).val(city[i]['region_id']);
                $(option).html(city[i]['region_name']);
                $("#city_id").append(option);
            }
        }
        
    });
});
</script>
<script>
$("#city_id").change(function(){
    var city_id=$(this).val();
    $.ajax({
        url:'/city/index.php/Home/Index/get_district',
        Type:"POST",
        data:"city_id="+city_id,
        dataType:"json",
        success:function(data){
            var district = data.district;
            var option=$("<option></option>");
            $(option).val("0");
            $(option).html("請選擇");
            $("#district_id").html(option);
            for(var i in district){
                var option=$("<option></option>");
                $(option).val(district[i]['region_id']);
                $(option).html(district[i]['region_name']);
                $("#district_id").append(option);
            }
        }
    });
});
</script>

2，後臺程式碼很重要。

<?php
namespace Home\Controller;
use Think\Controller;
class IndexController extends Controller {
    //獲取省和直轄市
    public function index(){
        $listObj = M('region');
        $whereprovince['top_parentid'] = 0;
        $listprovince = $listObj->where($whereprovince)->select();
        $this->assign("province_list",$listprovince);
        
        $this->display();
    }
    //獲取地級市
    public function get_citys(){
        $listObj = M('region');
        $where['top_parentid'] = I('province_id');
        $where['level'] = 2;
        $list = $listObj->where($where)->select();
        $data=array('status'=>0,'city'=>$list);
        header("Content-type: application/json");
        exit(json_encode($data));
    }
    //獲取地級縣
    public function get_district(){
        $listObj = M('region');
        $where['parent_id'] = I('city_id');
        $where['level'] = 3;
        $list = $listObj->where($where)->select();
        $data=array('status'=>0,'district'=>$list);
        header("Content-type: application/json");
        exit(json_encode($data));
    }

下面是核心程式碼和資料庫檔案，需要的下載就可以了。

http://pan.baidu.com/s/1kU2RDTP

相關文章