thinkphp+ajax 實現地區聯動效果執行個體

由於項目的需求需要寫一個地區聯動的功能，在網上找了一個地址庫，放到了資料庫中弄了大半天終於實現了想要的功能。廢話不多說了將源碼發出來。

尋找出省級城市

“執行代碼：

代碼如下	複製代碼
<?php $area =M("Area"); $privince = $area->where("region_type = 1")->select(); $this->assign("privince",$privince); ?>

javascript代碼：

代碼如下

複製代碼

<script type="text/javascript"> var xmlHttp; var requestType=""; function createXMLHttpRequest() {     if(window.ActiveXObject)     {         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");     }     else if(window.XMLHttpRequest)     {         xmlHttp=new XMLHttpRequest();     } } function handleStateChange(){     if(xmlHttp.readyState==4)         {         if(xmlHttp.status==200)             {             if(requestType=="city"){                                 showcity();                             }             else if(requestType="area"){                                     showarea();                                 }             }         } } function queryCity(citycode){     createXMLHttpRequest();     requestType="city";     var url="/esoxue.php/Crm/area/provincecode/"+citycode+"/"+Math.random();     xmlHttp.open("GET",url,true);     xmlHttp.onreadystatechange=handleStateChange;     xmlHttp.send(null);     } function queryArea(citycode){     createXMLHttpRequest();     requestType="area";     var url="/esoxue.php/Crm/area/citycode/"+citycode+"/"+Math.random();     xmlHttp.open("GET",url,true);     xmlHttp.onreadystatechange=handleStateChange;     xmlHttp.send(null); } function showcity(){   document.getElementById("city").innerHTML=xmlHttp.responseText;//捕獲ID顯示返回的資料 } function showarea(){     document.getElementById("area").innerHTML=xmlHttp.responseText;//捕獲ID顯示返回的資料 } </script> html代碼： <div class="controls"> <select name="area[]" onchange='queryCity(this.options[this.selectedIndex].value)'> <option value="0">請選擇地區</option> <volist name="privince" id="vo"> <option value="{$vo.region_id}">{$vo.region_name}</option> </volist> </select>&nbsp; <span id='city'></span>&nbsp; <span id='area'></span>  </div> 執行代碼： public function area() { $area =M('Area'); $provincecode=$_GET['provincecode'];//接收省索引值 $citycode=$_GET['citycode'];//接收城市索引值 if($provincecode !=""){ $citys=$area->where("parent_id='$provincecode'")->select(); echo "<select name='area[]' onchange='queryArea(this.options[this.selectedIndex].value)'>"; echo "<option value='-1' selected>請選城市</option>n";     foreach ($citys as $key=>$val ){  echo "<option value='{$citys[$key]['region_id']}'>{$citys[$key]['region_name']}</option>";    } } if($citycode!=""){ $areas=$area->where("parent_id='$citycode'")->select(); if(!empty($areas)){ echo "<select name='area[]'>n"; echo "<option value='-1' selected>請選擇縣</option>n";    foreach ($areas as $key=>$val ){ echo "<option value='{$areas[$key]['region_id']}'>{$areas[$key]['region_name']}</option>";     }     echo "</select>n"; }else{ $areaname =$area->where("region_id ='$citycode'")->field('region_name')->find(); echo "<select name='area[]'>n"; echo "<option value='-1' selected>請選擇縣</option>n"; echo "<option value='{$areaname['region_name']}' selected>{$areaname['region_name']}</option>"; echo "</select>n"; } } }

效果圖如下：

最終效果圖：