select 三級聯動,載入選定(親測成功)
阿新 • • 發佈:2018-11-15
自己在專案中遇到的問題,預設載入三級聯動不成功。
在網上找了很多文章,都沒有滿足需求。
直接上程式碼,親測成功,寫得不好的,還請指教。
thinkphp 框架中使用 ,使用頁面 .tpl
<tr> <th width="10%">地區 :</th> <td> <select name="province_id" id="province_id" onchange="loadRegion('province_id',{$info.cemetery.province_id},2,'city_id','{:U('china/getRegion')}',{$info.cemetery.city_id});clear_id('city_id');clear_id('area_id');"> <option value="0" selected>省份/直轄市</option> <volist name="province" id="vo"> <option value="{$vo.id}" >{$vo.name}</option> </volist> </select> <select name="city_id" id="city_id" onchange="loadRegion('city_id',{$info.cemetery.city_id},3,'area_id','{:U('china/getRegion')}',{$info.cemetery.area_id});clear_id('area_id');"> <option value="0">市/縣</option> </select> <select name="area_id" id="area_id"> <option value="0">鎮/區</option> </select> </td> </tr>
$(function() { $('#province_id').val({$info.cemetery.province_id}); $('#province_id').trigger("change"); $('#city_id').val({$info.cemetery.city_id}); $('#city_id').trigger("change"); $('#area_id').val({$info.cemetery.area_id}); $('#area_id').trigger("change"); }); function clear_id(id){ $('#'+id).empty(); jQuery("<option value=0>請選擇</option>").appendTo(jQuery("#"+id)); } function loadRegion(sel,parent_id,type_id,selName,url,value){ jQuery("#"+selName+" option").each(function(){ jQuery(this).remove(); }); jQuery("<option value=0>請選擇</option>").appendTo(jQuery("#"+selName)); if(parent_id==0 || parent_id==""){ parent_id=jQuery("#"+sel).val(); } if(jQuery("#"+sel).val()!=0 && jQuery("#"+sel).val()!="" && jQuery("#"+sel).val()!=parent_id) { parent_id=jQuery("#"+sel).val(); } if(parent_id==0){ return; } if(value==0){ value=-99; } jQuery.getJSON(url,{pid:parent_id,type:type_id}, function(data){ if(data){ jQuery.each(data,function(idx,item){ jQuery("<option value="+item.id+""+ (value==item.id?" selected":"") +">"+item.name+"</option>").appendTo(jQuery("#"+selName)); }); }else{ jQuery("<option value='0'>請選擇</option>").appendTo(jQuery("#"+selName)); } } ); }
使用頁面的控制器 Action.class.php
public function _before_edit()
{
$province = D('china')->where ( array('pid'=>1) )->select ();
$this->assign('province',$province);
}
ajax 獲取下級列表,城市 Action.class.php
class chinaAction extends BackendAction{ public function _initialize(){ parent :: _initialize(); $this->_name = 'china'; $this -> _mod = D('china'); } public function index(){ $province = $this -> _mod->where ( array('pid'=>1) )->select (); $this->assign('province',$province); $this->display(); } public function getRegion(){ $map['pid']=$_REQUEST["pid"]; $map['type']=$_REQUEST["type"]; $list=$this -> _mod->where($map)->select(); echo json_encode($list); } }
執行截圖:
全國最新城市(省、市、區) .sql 下載地址